Javascript 如何在Apollo v3 React客户端中执行不同查询的情况下实现乐观UI

我正在尝试实现类似于功能的乐观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。 这就是问题所在，我只想添加乐观的用户界面，以避免等待长时间的服务器响应，但它根本不起作用。可能是因为重新获取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({
  variables: {
    status: !article.liked,
    articleId: article.id,
  },
});

---

在这种情况下，使用

client

和

optimisticResponse

选项提供的任何帮助/信息都将非常有用。这是你的电话号码。在GraphQL服务器实际返回变异结果之前，通常可以预测最有可能的结果。Apollo客户端可以使用这一可能的结果乐观地更新您的UI，使应用程序对用户的反应更加灵敏。使用

client

是一个很好的方法，但是如果请求失败，并且您希望手动执行上一个乐观操作的反转，那么它将不起作用。我会优先考虑

optimisticResponse

而不是

client

optimisticResponse

用于当前请求-响应模拟，更新可用于更新查询缓存项。。。但在突变反应后也会被激发。。。。您可以使用

client

在调用mutation之后立即更新缓存，以防handler不知道它。谢谢@xadm，我非常感谢您的帮助尝试

乐观响应：{likeArticle:{

-

likeArticle

，因为这是您期望的变异数据结构…如果查询和变异都是引用（在缓存存储中）对于同一个对象，则应更新/重新提交基于组件的/基于查询结果的监视…如果不更新/重新提交，则使用客户端缓存更新/写入不起作用，不幸的是，

likeArticle

mutation返回布尔标量类型，因此Apollo无法确定与此特定mutation相关的对象使其返回项目类型谢谢你的回答，Kiran，但是乐观的UI在我的情况下根本不起作用，所以，不幸的是，唯一的方法就是@xadm提到的客户端操作