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

Posted 2023-03-08

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

【英文标题】：How to implement the optimistic UI in the case of fe-retching a different query in Apollo v3 React client

【发布时间】：2021-08-05 07:39:57

【问题描述】：

我正在尝试为 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,
  ,
);

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

【问题讨论】：

optimisticResponse 用于当前请求响应模拟，更新可用于更新查询缓存条目...但在突变响应后也被触发...您可以使用client 更新在事件处理程序中调用突变后缓存

我明白了，不知道。谢谢@xadm，非常感谢您的帮助

尝试optimisticResponse: likeArticle: - likeArticle，因为它是您的突变预期数据结构......如果查询和突变都是对同一对象的引用（在缓存存储中），则基于组件/监视查询结果应该更新/重新呈现...如果没有，使用客户端缓存更新/writeQuery

不起作用，不幸的是，likeArticle 突变返回布尔标量类型，因此 Apollo 无法确定与此特定突变相关的对象

让它返回文章类型？

【参考方案1】：

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

【讨论】：

感谢 Kiran 的回答，但乐观的 UI 在我的情况下根本不起作用，所以不幸的是，唯一的方法就是 @xadm 提到的客户端操作