React+GraphQL添加任务报400错误及函数return写法咨询

一、添加任务时400 Bad Request错误的修复 #

1. 修正Mutation变量传递格式 #

你的AddTask函数中，传递给addTaskMutation的input参数格式错误。Schema定义的taskInput是包含name字段的对象，但你直接传入了字符串name，导致参数不匹配。

修改前：

function AddTask(name) {
  addTaskMutation({ variables: {input: name } });
}

修改后：

function AddTask(name) {
  addTaskMutation({ variables: {input: { name: name } } });
}

2. 修正onCompleted中的数据获取路径 #

你的mutation定义是newTask，返回的数据应从data.newTask获取，而非data.addTask，否则无法正确更新本地状态。

修改前：

onCompleted: (data) => {
  setTasks(prevTasks => [...prevTasks, data.addTask]);
}

修改后：

onCompleted: (data) => {
  setTasks(prevTasks => [...prevTasks, data.newTask]);
}

3. 完善Mutation返回字段 #

当前ADD_TASK仅请求返回name，但Task组件需要done和id字段，建议补充完整避免渲染错误：

const ADD_TASK = gql`
mutation newTask($input: taskInput!) {
  newTask(input: $input) {
    name
    done
    id
  }
}
`;

4. 数据同步逻辑问题 #

你同时维护了本地localStorage的tasks状态和GraphQL查询的taskss数据，但渲染用的是taskss.data.tasks，添加任务后却更新localStorage的tasks，导致视图与数据源不一致。建议统一使用GraphQL数据，移除localStorage相关的useState和useEffect，或在GET_TASKS的onCompleted中同步到localStorage。

二、函数中return的使用规范 #

1. GraphQL Resolver必须返回符合Schema定义的值 #

你的Resolver中updatedTitle、deletedTask、updatedTask三个mutation函数未写return，但Schema定义它们返回Boolean，会导致GraphQL返回错误或null。必须添加return语句：

例如deletedTask修改后：

deletedTask: async (parent, args, context, info) => {
  const id = args.id
  await client.delete({
    index: 'tasks',
    id: id,
  });
  return true; // 操作成功返回true，失败可捕获错误返回false
}

2. 普通函数的return规则 #

• 若函数需要返回值（如getMessage），必须在对应位置return结果；
• 若函数不需要返回值（如未实现的removeTask、updateTaskDone），可不写return，默认返回undefined，事件处理这类场景无影响；
• async函数必须确保返回值符合预期，因为async函数默认返回Promise，Resolver依赖该Promise结果返回数据给客户端。

内容的提问来源于stack exchange，提问作者anfield