Apollo Client是否有类似React Query invalidateQueries的功能?
Apollo Client 中标记缓存过期并重新获取数据的等效方案
当然有,Apollo Client 提供了几种和 React Query invalidateQueries 功能等效的方式,完全能满足你创建/更新实体后让缓存失效、自动从服务器拉取新数据的需求:
- 使用
invalidateQueries标记缓存失效
Apollo Client 本身就自带invalidateQueries方法,逻辑和 React Query 的同名功能一致——把匹配到的查询缓存标记为“过时”,当下次组件渲染或者触发相关查询时,就会自动从服务器重新获取最新数据。
示例代码:
// 先执行创建/更新实体的mutation await client.mutate({ mutation: CREATE_ENTITY_MUTATION, variables: { /* 你的实体数据变量 */ } }); // 标记实体列表查询的缓存失效 client.invalidateQueries({ query: GET_ENTITY_LIST_QUERY, // 指定目标查询 // 也可以用查询名称匹配:queryName: 'GetEntityList' });
要是需要批量匹配多个相关查询,还能通过 predicate 参数做模糊匹配:
client.invalidateQueries({ predicate: (query) => query.queryName.includes('Entity') });
- 在 Mutation 中配置
refetchQueries直接刷新
如果想在 mutation 执行完成后立刻触发查询刷新,不用等下次渲染,可以直接在 mutation 配置里加refetchQueries。它会主动调用指定的查询重新获取数据,效果和标记失效后立即触发刷新一致。
示例代码:
client.mutate({ mutation: UPDATE_ENTITY_MUTATION, variables: { /* 你的更新变量 */ }, refetchQueries: [ { query: GET_ENTITY_LIST_QUERY }, // 指定要刷新的查询 // 也可以直接传查询名称字符串:'GetEntityList' ] });
- 用
cache.evict彻底清除缓存条目
如果需要更直接地移除缓存(而非标记失效),可以用cache.evict删除对应的缓存键,这样下次查询时肯定会从服务器拉取新数据。这种方式和标记失效逻辑略有不同,但同样能达到你要的“重新获取”效果:
await client.mutate({ mutation: UPDATE_ENTITY_MUTATION, variables: { /* 变量 */ } }); // 清除实体列表的缓存 client.cache.evict({ query: GET_ENTITY_LIST_QUERY }); client.cache.gc(); // 清理无用的缓存垃圾
内容的提问来源于stack exchange,提问作者A.A
相关产品推荐
相关产品推荐

