Question

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

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

一些信息，由于我尚未向其中写入任何数据（因此尚无db /后端可用），因此缓存一开始应为空。但是，即使在我向其中写入一些数据（用户发送的数据，又将其发送回客户端）之后，proxy.readQuery仍会在接收到实际的Mutation响应之前产生一个空的缓存

这是我的突变钩子代码

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有效负载和实际的Mutation响应有效负载应该相同，并且不会清空缓存。

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

Answer 1

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

Apollo的proxy.writeQueries清空缓存（是否有错误？）

1 个答案: