2

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

文章 GraphQl 架构

我想改变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 以不等待长时间的服务器响应，但它根本不起作用。可能是因为重新获取 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,
  },
});

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

4

1 回答 1

0

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

于 2021-05-15T16:47:26.767 回答