ApolloClient：更新期间 optimisticResponse 变为 "undefined"

Question

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

突变本身工作正常 - 服务器得到更新，当我刷新页面时，插入已成功出现。但是，一旦 update() 函数第二次运行，写入查询的 optimisticResponse 变为 "undefined" ，服务器响应 "real" .

我的突变代码如下所示：

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 是 "there" 但是 undefined：

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

老实说，我不确定在生命周期的这一点上应该发生什么...... optimisticResult 是否仍然存在？或者它应该已经被删除？无论哪种情况，我都确定它不应该存在并且 undefined 因为那是导致错误的原因。

Answer 1

事实证明这是一个愚蠢的错误 - 服务器返回的突变的真实响应与客户端中设置的形状不同。

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

ApolloClient：更新期间 optimisticResponse 变为 "undefined"

ApolloClient: optimisticResponse becomes "undefined" during update

apollo

apollo-client

vue-apollo