Apollo Mutation组件中Optimistic UI的实现语法咨询

嘿，我来帮你把这个Mutation组件加上Optimistic UI功能！这玩意儿能让用户立刻看到操作反馈，不用等服务器响应，体验直接拉满。

先给你看修改后的完整代码，然后我再拆解每个新增部分的作用：

<Mutation
  mutation={ADD_TODO}
  // 新增：配置乐观响应
  optimisticResponse={{
    __typename: 'Mutation',
    addTodo: {
      __typename: 'Todo',
      id: `temp-${Date.now()}`, // 生成唯一临时ID，用于区分乐观数据
      text: inputText, // 这里要传入用户实际输入的todo文本（需存在组件state中）
      completed: false
    }
  }}
  update={(cache, { data: { addTodo } }) => {
    const { todos } = cache.readQuery({ query: GET_TODOS });
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: todos.concat([addTodo]) }
    });
  }}
>
  {(addTodo, { loading, error }) => (
    // 你的触发按钮/表单逻辑示例
    <button 
      onClick={() => addTodo({ variables: { text: inputText } })} 
      disabled={loading}
    >
      添加Todo
    </button>
  )}
</Mutation>

关键部分解析 #

• optimisticResponse 属性：这是实现Optimistic UI的核心。它定义了我们模拟服务器返回的响应结构，必须和真实的addTodo返回类型完全匹配（包括__typename，Apollo缓存靠这个识别数据类型）。这里用temp-${Date.now()}生成临时ID，确保它唯一，等服务器返回真实ID后，Apollo会自动把这个临时条目替换成真实数据。
• 同步用户输入：乐观响应里的text必须是用户当前输入的内容，所以你需要把输入值存在组件的state中（比如示例里的inputText），这样乐观更新的内容才和用户操作一致。
• 自动回滚机制：如果服务器请求失败，Apollo会自动移除缓存里的乐观更新内容，完全不用你手动处理这部分，非常省心。

进阶：区分乐观/真实响应（可选） #

如果你的业务逻辑需要区分乐观更新和真实响应的处理，可以通过update函数的第三个参数context来判断：

update={(cache, { data: { addTodo } }, context) => {
  const { todos } = cache.readQuery({ query: GET_TODOS });
  if (context.optimistic) {
    // 乐观更新时的自定义逻辑
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: todos.concat([addTodo]) }
    });
  } else {
    // 真实响应返回后的逻辑（比如替换临时ID的条目）
    const newTodos = todos.map(todo => 
      todo.id.startsWith('temp-') ? addTodo : todo
    );
    cache.writeQuery({
      query: GET_TODOS,
      data: { todos: newTodos }
    });
  }
}}

不过大部分场景下，Apollo的自动替换机制已经够用，不需要额外写这段逻辑。

注意事项 #

• 确保optimisticResponse的结构和服务器返回的完全一致，包括所有字段和__typename，否则缓存更新会出现异常。
• 临时ID要保证唯一，避免和服务器生成的真实ID冲突。
• 如果你的Todo有其他字段（比如createdAt），也要在乐观响应里填上合理的临时值。

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