Apollo Client 3正确实现optimistic response及不生效排查

你漏写了optimisticResponse最外层的Mutation根类型__typename标识，这是Apollo Client乐观更新最常见的低级坑。

InMemoryCache处理乐观响应时会校验完整的类型链路：不仅嵌套的业务实体需要声明__typename，最外层的操作根对象也必须标注对应类型，否则缓存会判定传入的乐观数据结构不合法，直接跳过乐观层写入逻辑，等真实网络响应返回后才会更新数据，表现出来就是乐观更新完全不生效。

你当前的代码只给内层的List实体加了__typename，最外层根对象缺失类型声明，和你配置的List主键策略、mutation定义、await写法都没有关系。

在optimisticResponse的最外层补上__typename: 'Mutation'即可，修正后的触发代码如下：

const [action] = useMutation(mutation_from_above)
// async body function so await can be used
await action({ 
  variables: { id: 1, data: { name: 'secret name' }}, 
  optimisticResponse: {
    __typename: 'Mutation', // 仅新增这一行即可修复
    updateList: {
      __typename: 'List',
      list_id: 1,
      name: 'some updated name until data is back'
    }
  }
})

• InMemoryCache默认开启的addTypename: true配置，只会自动给网络返回的响应数据补全__typename，不会自动修正你手动传入的optimisticResponse对象，所有手动写的乐观响应都需要自己补全全链路的__typename。
• 校验list_id的类型和缓存中存储的实体主键类型一致：如果接口返回的list_id是字符串格式，乐观响应里传数字1会导致缓存匹配不到已有实体，同样会出现更新不生效的问题，这种场景把值改成字符串'1'即可。
• 如果后续配置了update函数处理缓存更新，记得update函数会执行两次：第一次处理乐观数据，第二次处理真实网络返回数据，不需要额外加判断区分，缓存会自动在真实响应返回后替换掉临时的乐观数据。

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