新增Task后需刷新页面才显示，Apollo Cache手动更新newTask失败求助

我可以在站点添加Task，但必须重新加载页面才能看到该任务。数据已经存入数据库，并且能在Apollo4里查看。手动更新缓存时，updateTaskDone和deleteTask的缓存更新都正常，但newTask的缓存更新无法生效。

问题根源 #

你的ADD_TASK mutation返回字段不完整：只返回了name，但GET_TASKS查询需要name、done、id三个字段。当你将newTask写入缓存时，缺少id和done，导致Apollo无法正确识别这条新任务，缓存更新后组件无法渲染出新增内容。

修复方案 #

1. 完善Mutation返回字段（推荐）

修改ADD_TASK的GraphQL定义，让它返回与GET_TASKS一致的字段：

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

这样后端返回完整的任务数据后，update函数里直接拼接即可正常更新缓存。

2. 手动补充缺失字段（临时方案）

如果暂时无法修改后端返回，可在update函数中手动补充done和id：

function AddTask(name) {
  addTaskMutation({
    variables: {
      input: {
        name: name
      }
    },
    update: (cache, { data: { newTask } }) => {
      const { tasks } = cache.readQuery({ query: GET_TASKS });
      // 补充缺失的字段，done默认设为false，id确保后端返回或用临时值
      const completeTask = {
        ...newTask,
        done: newTask.done ?? false,
        id: newTask.id // 如果后端没返回，可考虑用uuid生成临时id
      };
      const updatedTasks = [...tasks, completeTask];
      cache.writeQuery({
        query: GET_TASKS,
        data: { tasks: updatedTasks }
      });
    }
  });
}

额外注意

你的TASK_DONE mutation定义存在参数缺失问题：调用时传入了done变量，但mutation未声明该参数，需同步修正：

const TASK_DONE = gql`
  mutation updatedTask($id: ID!, $done: Boolean!) {
    updatedTask(id: $id, done: $done) 
  }
`;

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