Question

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

我很担心＆＃39; optimisticResponse＆＃39;并且＆＃39;更新＆＃39;。

这里使用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

要扩展其他两个答案，区别在于缓存中是否已经存在您要“更新”的事物。

根据docs，如果要更新现有项目，例如编辑待办事项的标题，则只需要optimisticResponse。为什么？因为缓存包含该节点，所以您只需要告诉它新节点发生了新的事情，该问题立即反映在UI上。

optimisticResponse仅提供来自突变的“立即”结果数据。

现在我们有第二种情况，您想向列表中添加一个新的Todo项目。首先，缓存需要知道已创建新项目。为突变提供update属性后，就可以控制缓存的状态。

update代替了refetchQueries，这意味着您可以控制缓存状态。

使用update，您可以进入缓存并专门修改/附加所需的节点，这与重新获取整个数据层次结构相反。但是，您仍在等待突变完成。如果在update旁边提供optimisticResponse，则将立即提供假定的响应，并将其提供给您的个人update函数，然后该函数立即更新缓存。

这两种在方案二中配对的原因是，您完全绕过了服务器响应。如果仅给出“立即”响应，则Apollo仍处于等待服务器更新缓存的模式。 update还可以让您劫持，并在客户端进行。

最后的提示：您假设服务器始终在响应且没有错误。其他地方的错误处理仍然可以使用，但是如果您经常捕获错误（例如isLoggedIn场景），则可能会遇到UI不一致的情况，因此请确保“快速跟踪”的查询通常情况良好。

Answer 3

用于修改存储的乐观响应，而没有后端响应。商店在收到新数据时会自动更新

用于通过后端响应修改存储的更新。商店不会自我更新

Apollo客户端中的optimisticResponse与更新？

3 个答案: