我想在突变后使用乐观的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的方法。
两者有什么区别?您应该同时使用还是仅使用其中之一?
他们做不同的事情。optimisticResponse预测来自服务器的响应。如果要更新存储中已存在的节点,则可能只需要这些。
更新功能使您可以完全控制商店。例如,如果您创建了一个新节点,则需要将其添加到相关查询中。作为新实体,Apollo不会自动知道该怎么做。
为了扩展其他两个答案,区别在于缓存中是否已经存在您正在“更新”的事物。
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 ofrefetchQueries
, 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不一致的情况,因此请确保您“快速跟踪”的查询通常状况良好。