在 Apollo v3 React 客户端 fe-retching 不同查询的情况下如何实现乐观 UI

Question

我正在尝试为 like 功能实现 Optimistic UI，但我无法处理它，因为我必须重新获取专用查询以更新文章。 让我通过代码示例更好地解释一下： 这是我的文章文档。

我想改变 liked 属性，我有一个突变要做：

  mutation LikeArticle($status: Boolean!, $articleId: String!) {
    likeArticle(status: $status, articleId: $articleId)
  }

要获取文章文档，我有以下查询：

  query GetArticle($id: String!) {
    getArticle(id: $id) {
      id
      createdAt
      liked
      likes

      author {
        id
        username
      }

      topics {
        id
        name
      }
    }
  }

在我的 UI 中，我只是根据 getQuery 提供的数据呈现文章文档。另外，我有 Like 按钮，当用户按下它时，likeArticle 突变会执行，我必须重新获取 getArticle 查询以更新 UI . 这就是问题所在，我只想添加乐观的 UI 以不等待长时间的服务器响应，但它根本不起作用。可能是因为 re-fetching getArticle 查询，但我不确定

  const [
    likeArticle,
    {
      data: likeArticleData,
      loading: likeArticleLoading,
      error: likeArticleError,
    },
  ] = useMutation(LIKE_ARTICLE, {
    refetchQueries: [
      {
        query: GET_ARTICLE_QUERY,
        variables: { id: article.id },
      },
    ],
    optimisticResponse: {
      getArticle: {
        id: article.id,
        __typename: "Article",
        liked: !article.liked,
      },
    },
  });

执行likeArticle 变异

的示例

likeArticle({
  variables: {
    status: !article.liked,
    articleId: article.id,
  },
});

我将不胜感激任何帮助/信息

Answer 1

在这种情况下，使用 client 和 optimisticResponse 选项可能会有所帮助。这是Official Docs。通常可以在 GraphQL 服务器实际返回它之前预测最可能的突变结果。 Apollo Client 可以使用这个可能的结果来乐观地更新您的 UI，使应用程序对用户的响应更加灵敏。使用client 遥遥领先，但如果请求失败并且您希望手动逆转最后一个乐观操作，它将无法工作。我会优先考虑optimisticResponse 而不是client。