optimisticResponse 与 Apollo Client 中的更新？

Question

我想在突变后使用乐观 UI 更新：https://www.apollographql.com/docs/react/basics/mutations.html

我对 'optimisticResponse' 和 'update' 之间的关系感到困惑。

这里使用optimisticResponse:

    const CommentPageWithData = graphql(submitComment, {
      props: ({ ownProps, mutate }) => ({
        submit: ({ repoFullName, commentContent }) => mutate({
          variables: { repoFullName, commentContent },

          optimisticResponse: {
            __typename: 'Mutation',
            submitComment: {
              __typename: 'Comment',
              // Note that we can access the props of the container at `ownProps` if we
              // need that information to compute the optimistic response
              postedBy: ownProps.currentUser,
              createdAt: +new Date,
              content: commentContent,
            },
          },
        }),
      }),
    })(CommentPage);

只使用这个更新商店吗？

文档然后说这用于更新缓存：

    const text = 'Hello, world!';

    client.mutate({
      mutation: TodoCreateMutation,
      variables: {
        text,
      },
      update: (proxy, { data: { createTodo } }) => {
        // Read the data from our cache for this query.
        const data = proxy.readQuery({ query: TodoAppQuery });

        // Add our todo from the mutation to the end.
        data.todos.push(createTodo);

        // Write our data back to the cache.
        proxy.writeQuery({ query: TodoAppQuery, data });
      },
    });

这是我在不使用 optimisticResponse 函数的情况下成功更新 UI 的方法。

两者有什么区别？你应该同时使用还是只使用一个？

Answer 1

他们做不同的事情。 optimisticResponse 预测来自服务器的响应。如果您正在更新商店中已有的节点，那么这可能就是您所需要的。

更新功能让您可以完全控制您的商店。例如，如果您创建了一个新节点，则需要将其添加到相关查询中。作为一个新实体，Apollo 不会自动知道如何处理它。

Answer 2

乐观响应用于在没有后端响应的情况下修改存储。存储在收到新数据时自行更新

更新用于使用来自后端的响应修改商店。商店不会自行更新

Answer 3

扩展其他两个答案，区别在于你'updating'的东西是否已经存在于缓存中。

根据 docs，如果您要更新现有项目，比如编辑待办事项的标题，您只需要 optimisticResponse。为什么？因为缓存包含节点，你只需要告诉它新节点发生了一些新的事情，这会立即反映在 UI.

optimisticResponse just provides an 'immediate' result data from a mutation.

现在我们有第二种情况，您想向列表中添加一个新的待办事项。首先，缓存需要知道创建了一个新项。只要您向 Mutation 提供 update 属性，您就可以控制缓存的状态。

update takes place of refetchQueries, which means you are in control of the cache state.

使用 update，您可以访问缓存并 modify/append 专门访问您需要的节点，而不是重新获取整个数据层次结构。但是，您仍在等待突变完成。如果您在提供 optimisticResponse 的同时提供 update，您将提供一个即时的假设响应，并将其提供给您的个人 update 函数，该函数随后会立即更新缓存。

这两个在场景二中配对的原因是您完全绕过了服务器响应。如果你只是给一个'immediate'响应，Apollo还处于等待服务器更新缓存的模式。 update 让您也可以劫持它，并在客户端进行。

Final Note: you are assuming the server is always responding without errors. Error handling elsewhere will still work, but you might get into UI inconsistencies if you are frequently catching errors (say isLoggedIn scenarios) so def make sure that the queries you 'fast track' are typically healthy.

optimisticResponse 与 Apollo Client 中的更新？

optimisticResponse vs update in Apollo Client?

apollo-client