Apollo 客户端 - 从缓存中读取

Posted

技术标签:

【中文标题】Apollo 客户端 - 从缓存中读取【英文标题】:Apollo Client - reading from cache 【发布时间】:2021-06-05 00:44:37 【问题描述】:

React + Apollo 客户端应用。我正在尝试使用 readQuery 从我的缓存中读取,但无法读取缓存的字段。

这里有一个纲要:

组件SinglePost 调用useQuery,它执行我的GET_POST 查询并缓存结果。 GET_POST 查询返回类型 Post!。一切都很好,开发工具显示ROOT_QUERY 包含一个名为 getPost 的字段和该帖子。

const  loading, data  = useQuery(GET_POST, 
    variables: 
      postID,
    
);

SinglePost 有一个子组件DeleteButton,它会在点击时删除评论。它调用useMutation 并删除评论。 DELETE_COMMENT查询返回类型Comment!

const [deleteComment] = useMutation(DELETE_COMMENT, 
    variables: 
      postID,
      commentID,
    ,
);

Post 有一个 cmets 数组,现在我需要在缓存中更新它的数组并删除已删除的评论。我在deleteComment 突变中使用update 函数来获取缓存对象并使用readQuery 从中获取getPost 字段,但它甚至返回null虽然它在开发工具中。

update(cache, result) 
  const cacheData = cache.readQuery(
    query: GET_POST,
  );
  // code that doesn't run because cacheData is null

我怀疑当通过返回 Post 类型的突变对帖子进行突变时,它会成功读取 getPost 字段,但是当突变查询返回 Comment 类型时,它无法读取 getPost 在它的变异钩子中...因为没有引用 Post 类型?

现在我使用refetchQueries 作为解决方法。我不喜欢对服务器进行额外的调用,但我光滑的大脑无法弄清楚这一点。任何帮助表示赞赏。

【问题讨论】:

你必须传递相同的变量(postID 你是对的!!!我忘记了变量。谢谢! 【参考方案1】:

哎呀,没有变量被传递给查询。

update(cache, result) 
  const cacheData = cache.readQuery(
    query: GET_POST,
    variables: 
      postID
    
  );

【讨论】:

以上是关于Apollo 客户端 - 从缓存中读取的主要内容,如果未能解决你的问题,请参考以下文章

GraphQL 角度阿波罗客户端。从缓存中读取抛出错误,但对服务器的相同查询工作正常

使用 Apollo 链路状态缓存实现客户端过滤

GraphQL/Apollo 客户端:如果查询是先前查询的子集,则从缓存中获取数据

Apollo 客户端:缓存更新后组件不呈现(反应变量)

Apollo 从缓存中查询对象值

Apollo 客户端缓存与 Redux