ApolloClient：optimisticResponse 在更新期间变为“未定义”

Posted 2023-03-10

【中文标题】ApolloClient：optimisticResponse 在更新期间变为“未定义”

【英文标题】：ApolloClient: optimisticResponse becomes "undefined" during update

【发布时间】：2020-07-01 13:49:04

【问题描述】：

我正在尝试使用带有 vue-apollo 的 ApolloClient 在突变中执行 optimisticResponse。

突变本身工作正常 - 服务器已更新，当我刷新页面时，插入已成功出现。但是，一旦update() 函数第二次运行，写入查询的optimisticResponse 将变为“未定义”，并带有来自服务器的“真实”响应。

我的变异代码如下所示：

this.$apollo.mutate(
  mutation: UPSERT_ITEMS,
  variables: 
    todoInput: [todoInput]
  ,

  update: (store, result) => 
    const upsertTodos = result.data!.upsertTodos
    const newTodo = upsertTodos.todo
    const data = store.readQuery<QueryResult>( query: GET_PROJECTS )
    console.log("Results from the cache:", data);
    data!.rc_todos.push(newTodo)
    console.log("after that push, data looks like...", data)
    store.writeQuery( query: GET_PROJECTS, data )

    // re-reading the query for debugging purposes:
    const sameData = store.readQuery<QueryResult>( query: GET_PROJECTS )
    console.log("New results from the cache:", sameData)
  ,
  optimisticResponse: 
    __typename: "Mutation",
    upsertTodos: 
      __typename: "InsertedTodo",
      id: 1,
      todo_id: 1,
      todo: 
        id: 1,
        label: nodeTitle,
        children: [],
        __typename: "rc_todos"
      
    ,
  ,
)

请注意，现在我在update() 中第二次调用readQuery 以进行调试。

在update() 的第一次运行中readQuery 的第二次调用（即在插入optimisticResponse 之后，它看起来像这样： ...所以一切看起来都很好，那里的字段与缓存中已经存在的数据相匹配，等等。

但是，当update() 第二次运行（处理来自服务器的结果）时，我们的optimisticResponse 是“那里”，但作为undefined：

这会产生错误TypeError: Cannot read property '__typename' of undefined。

老实说，我不确定在生命周期的这个阶段会发生什么……optimisticResult 是否仍然存在？或者它应该已经被删除了？在任何一种情况下，我都确定它不应该存在，undefined 因为这是导致错误的原因。

【问题讨论】：

我怀疑这可能与直接改变缓存有关。我会尝试store.writeQuery( query: GET_PROJECTS, data: rc_todos: [...data.rc_todos, newTodo] )。这将创建一个新数组，而不是改变从缓存中获得的数组。

我刚试了一下，可惜没有成功。

可能只是 apollo-client 的一个错误，尽管我之前没有看到过乐观更新的问题。您可能想尝试更新到最新版本（现在可以使用 3.0），看看是否有帮助。

【参考方案1】：

结果证明这是一个愚蠢的错误——服务器返回的突变的真正响应与它在客户端中的设置方式不同。

我在问题中截屏的部分实际上是预期的行为 - 它将先前添加的 optimisticResponse 设置为 undefined 以便在“真实”数据可用时将其删除。