删除给定查询和每组变量的Apollo Client缓存

Question

我有一个基于getAllItems查询的过滤项目列表,它将过滤器和一个order by选项作为参数.

创建新项目后,我想删除此查询的缓存,无论传递什么变量.我不知道该怎么做.

我不认为更新缓存是一种选择.Apollo Client文档中提到的方法(在变异后更新缓存,refetchQueries和更新)似乎都需要一组给定的变量,但由于过滤器是一个复杂的对象(带有一些文本信息),我需要更新缓存对于先前提交的每组给定变量.我不知道该怎么做.另外,只有服务器确实知道这个新项目如何影响分页和排序.

我不认为fetch-policy(例如将其设置为cache-and-network)是我正在寻找的,因为如果在创建新项目后访问网络是我想要的,那么当我只是过滤列表时(输入要搜索的字符串),我想保持默认行为(cache-only).

client.resetStore会为所有类型的查询(不仅是getAllItems查询)重置商店,所以我不认为这也是我正在寻找的.

我很确定我在这里遗漏了一些东西.

Answer 1

在当前版本的 Apollo 中没有官方支持的方法来执行此操作，但有一种解决方法。

在您的更新函数中，创建项目后，您可以遍历缓存并删除键以您尝试从缓存中删除的类型名称开头的所有节点。例如

// Loop through all the data in our cache
// And delete any items where the key start with "Item"
// This empties the cache of all of our items and 
// forces a refetch of the data only when it is next requested.
Object.keys(cache.data.data).forEach(key => 
  key.match(/^Item/) && cache.data.delete(key)
)

这适用于在缓存中使用不同变量多次存在的查询，即分页查询。

我在 Medium 上写了一篇文章，详细介绍了它的工作原理，以及一个实现示例和替代解决方案，这些解决方案更复杂，但在少数用例中效果更好。由于本文详细介绍了我在此答案中已经解释过的概念，因此我认为可以在此处分享：https : //medium.com/@martinseanhunt/how-to-invalidate-cached-data-in -apollo-and-handle-updating-paginated-queries-379e4b9e4698

Answer 2

这对我有用（需要 apollo 2 来实现缓存驱逐功能） - 从缓存中清除由正则表达式匹配的查询

清除缓存后，查询将自动重新获取，无需手动触发重新获取（如果您使用的是角度：gql.watch().valueChanges将执行xhr请求并发出新值）

export const deleteQueryFromCache = (cache: any, matcher: string | RegExp): void => {
    const rootQuery = cache.data.data.ROOT_QUERY;
    Object.keys(rootQuery).forEach(key => {
        if (key.match(matcher)) {
            cache.evict({ id: "ROOT_QUERY", fieldName: key })
        }
    });
}