Apollo GraphQL 客户端 : how to distinguish an optimistic response from a real response into a watchQuery

Question

问题是关于突变、乐观响应和 watchQuery 之间的交互。

我有一个突变“myMutation”，它具有“optimisticResponse”和已实现的“更新”功能。

每次我进行突变查询时，“更新”函数都会被调用两次，第一次使用乐观响应数据，第二次使用真实数据。一切正常，一切如文档中所述。

在我的“更新”函数中，我通过使用 readQuery/writeQuery 方法修改“myQuery”缓存数据。

每次我修改“myQuery”缓存数据时，都会调用 watchQuery(基于“myQuery”)订阅。一切正常，一切如文档中所述。

但问题是我无法区分我的 watchQuery 是收到乐观响应数据还是真实响应数据。这对我来说至关重要，因为 react 必须不同，因为有值(value)的数据部分只能由服务器提供。当我收到乐观的响应时，我应该显示具有特殊样式的 GUI 元素，并且我应该禁止与其进行任何交互，直到收到真正的响应。

不幸的是，我无法解决这个问题。乍一看，乐观的 react 和真实的 react 没有什么区别。我用谷歌搜索了很多，但没有找到解决方案。我唯一的想法是在 GraphQL 数据中添加一个特殊字段，该字段将显示是否从服务器收到响应。但它看起来很丑，而且味道很臭。我确信，一定有一个简单正确的方法来解决这个问题。

Answer 1

也许有一种更简单的方法，或者将来会有一种方法，但这是我所知道的。

optimisticResponse 中的数据仅在第一次调用更新期间提供。您可以在此处向更新函数标记它正在处理乐观数据。您可以在那里放置任何您想要的数据。我输入了 isOptimistic: true,。

要解决 watchQuery 问题，我建议您使用 apollo-link-state 将一个或多个客户端专用字段添加到数据区域模型应该让显示器知道乐观的更新插入。不要在突变查询中包含 isOptimistic ，这样您就知道它来自服务器而不是乐观响应，如果不正确，则强制其为 false。请参阅此示例:

const SUBMIT_COMMENT_MUTATION = gql`
  mutation submitComment($repoFullName: String!, $commentContent: String!) {
    submitComment(repoFullName: $repoFullName, commentContent: $commentContent) {
      postedBy {
        login
        html_url
      }
      createdAt
      content
    }
  }
`;

const CommentsPageWithMutations = ({ currentUser }) => (
  <Mutation mutation={SUBMIT_COMMENT_MUTATION}>
    {(mutate) => (
      <CommentsPage
        submit={(repoFullName, commentContent) =>
          mutate({
            variables: { repoFullName, commentContent },
            optimisticResponse: {
              __typename: 'Mutation',
              submitComment: {
                __typename: 'Comment',
                postedBy: currentUser,
                createdAt: new Date(),
                content: commentContent,
                isOptimistic: true, // Only provided to update on the optimistic call
              },
            },
            update: (proxy, { data: { submitComment } }) => {
              // Make sure CommentAppQuery includes isOptimistic for each comment added by apollo-link-state
              // submitComment.isOptimistic will be undefined here if it's from the server
              const newComment = {
                ...submitComment,
                isOptimistic: submitCommit.isOptimistic ? true : false,
              };

              // Read the data from our cache for this query.
              const data = proxy.readQuery({ query: CommentAppQuery });

              // Add our comment from the mutation to the end.
              data.comments.push(newComment);

              // Write our data back to the cache.
              proxy.writeQuery({ query: CommentAppQuery, data });
            },
          })
        }
      />
    )}
  </Mutation>
);

参见https://www.apollographql.com/docs/link/links/state.html .