当前位置:  开发笔记 > 前端 > 正文

optimisticResponse与Apollo Client中的更新?

如何解决《optimisticResponse与ApolloClient中的更新?》经验,为你挑选了2个好方法。

我想在突变后使用乐观的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的方法。

两者有什么区别?您应该同时使用还是仅使用其中之一?



1> Evanss..:

他们做不同的事情。optimisticResponse预测来自服务器的响应。如果要更新存储中已存在的节点,则可能只需要这些。

更新功能使您可以完全控制商店。例如,如果您创建了一个新节点,则需要将其添加到相关查询中。作为新实体,Apollo不会自动知道该怎么做。



2> 小智..:

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

As per the docs, if you are updating an existing item, say editing a title of a todo item, you only need optimisticResponse. Why? because the cache contains the node, and you only need to tell it that something new happened with the new node, which is immediately reflected on the UI.

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

Now we have a second case, you want to add a new Todo item to the list. First, the cache needs to know that a new item is created. As soon as you provide the update attribute to a Mutation, you are taking control of the caches' state.

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

With update you can reach into the cache and modify/append exclusively the node you need, as opposed to maybe refetching an entire hierarchy of data. However, you are still waiting for the Mutation to finish. If you provide the update along side the optimisticResponse, you are providing an immediate assumed response, and giving it to your personal update function, which then instantly updates the cache.

The reason these two are paired in scenario two, is that you are completely bypassing the server responses. If you just give a 'immediate' response, Apollo is still in the mode where it waits for the server to update cache. update lets you highjack that as well, and do it client side.

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

推荐阅读
农大军乐团_697
这个屌丝很懒,什么也没留下!
DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6
Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved devBox.cn 开发工具箱 版权所有