如何使 Apollo GraphQL 的整个缓存失效(不适用于一个特定查询) onclick

How to invalidate whole cache for Apollo GraphQL (not for one specific query) onclick

提问人:Bohdan Romanovich 提问时间:3/30/2023 更新时间:3/30/2023 访问量:1154

问:

我需要的是强制页面上的所有查询在单击一个按钮后重新获取数据。

我在这里找到了一个特定查询的灵魂(https://www.apollographql.com/docs/react/caching/advanced-topics/),但目前尚不清楚我是否可以一次对所有查询执行此操作。

JavaScript 缓存 graphql apollo 失效

评论

1赞 Sterling Archer 3/30/2023
我认为这里还有更多细节。首先,你想用这个按钮完成什么?(只是让一切重新加载?使缓存失效可能不是最好的解决方案,我们发现弄乱缓存通常会产生级联和烦人的效果。您可以做的是编译某种主 refetchQuery。其次,您能否展示与此问题相关的代码以及您到目前为止尝试过的内容?
0赞 Bohdan Romanovich 3/30/2023
@Sterling Archer 基本上,我需要的是通过单击按钮一次重新获取所有查询(不是整个页面,而只是查询)。而且我不想弄乱每一个查询并重新获取它。我没有代码,只是因为我还没有找到如何处理它。这就是我来这里的原因。
0赞 Bergi 3/30/2023
"我需要强制我在页面上的所有查询来重新获取数据“——你为什么需要它?为什么页面上的所有数据都会更改?您在缓存中存储了哪些要删除的数据?
0赞 Bohdan Romanovich 4/3/2023
@Bergi我需要它,因为我正在编写包含大量数据和图表的报告系统,有时用户可能希望使用相同的参数更新所有查询,只是为了更新数据。
0赞 Bergi 4/3/2023
在这种情况下,使用 client.refetchQueries({include:“all”}) 重新获取查询可能比使缓存失效更容易、更合适,尽管两者都是一种选择。

答:

0赞 Bergi 3/30/2023 #1

就在您已经链接的页面上,有 https://www.apollographql.com/docs/react/caching/advanced-topics/#resetting-the-cache

重置缓存

有时,您可能希望完全重置缓存,例如当 用户注销。为此,请调用 。此方法 是异步的,因为它还会重新提取任何活动查询。client.resetStore

import { useQuery } from '@apollo/client';
function Profile() {
    const { data, client } = useQuery(PROFILE_QUERY);
    return (
      <Fragment>
        <p>Current user: {data?.currentUser}</p>
        <button onClick={async ()=>client.resetStore()}>
            Log out
        </button>
      </Fragment>
    );
}

要在不重新获取活动查询的情况下重置缓存,请使用 代替 .client.clearStore()client.resetStore()