reactjs - Apollo 的 proxy.writeQueries 清空缓存(是否有错误？)

Question

我正在构建一个聊天应用程序，我正在尝试在用户发送消息时添加一个乐观的响应。但是，当结合 useMutation 的 optimisticResponse 和更新选项时，我遇到了一个问题。

当我使用 proxy.writeQuery 将乐观响应负载写入缓存时(在将其与缓存的先前内容合并之后)，缓存变为空，直到客户端收到实际的 Mutation 响应(和负载)。

一点信息，缓存在开始时应该是空的，因为我还没有向其中写入任何数据(还没有数据库/后端可用)。然而，即使我向其中写入了一些数据(用户发送的数据被发送回客户端)，proxy.readQuery 在收到实际的 Mutation 响应之前仍然会产生一个空缓存

这是我的 mutation Hooks 代码

sendMessage({
      variables: { message: messagePayload },

      // set temporary message
      optimisticResponse: {
        sendMessage: {
          ...messagePayload, 
          message_id: randomID, 
          __typename: "message" 
        }
      },

      // Update local cache with new message
      update: (proxy, { data: { sendMessage } }) => {
        // Read the data from our cache for this query.
        const existingData: any = proxy.readQuery({ 
          query: getMessageListQuery, 
          variables: { 
            agentID: someID, 
            roomID: props.activeChat 
          } 
        });

        // Push new data into previous data
        existingData.messages.push(sendMessage)

        // Write our data back to the cache with the new message in it
        proxy.writeQuery({ query: getMessageListQuery, data: existingData })

        // reading query here will yield an empty array
        console.log(proxy.readQuery({ 
          query: getMessageListQuery, 
          variables: { 
            agentID: someID, 
            roomID: props.activeChat 
          } 
        }))
      }
    })

从我看过的教程来看，编写 optimisticResponse payload 和实际的 Mutation 响应 payload 应该是一样的，并且不会清空缓存。

我是用错了还是这是一个错误？

Answer 1

共享同一个 GraphQL 文档但具有不同变量的查询被单独存储在缓存中。毕竟，如果变量不同，查询结果可能会有所不同。这意味着当我们从缓存读取和读取到缓存时(分别使用 readQuery 和 writeQuery)，我们需要指定使用的变量。在您的代码中，writeQuery 省略了变量，因此您不会在读取时写入缓存条目。