Apollo Client通过InMemoryCache实现高效缓存，需配置keyFields确保缓存键唯一，利用update回调或writeQuery手动更新，支持自定义缓存键处理无ID数据，结合evict、resetStore等方法合理清理缓存。
GraphQL 配合 Apollo Client 在现代前端开发中被广泛使用，其中缓存管理是提升性能和用户体验的关键环节。合理利用 Apollo Client 的缓存机制，可以减少重复请求、加快数据读取速度，并实现更流畅的交互体验。
理解 Apollo Client 默认缓存机制
Apollo Client 使用 InMemoryCache 作为默认缓存策略，它会自动将查询结果以对象形式存储，键由类型和 id 字段组合生成（即通过 __typename 和 id 构建缓存键）。
这意味着如果两个查询返回同一实体（例如用户信息），只要字段一致，后续查询可以直接从缓存中读取，无需发起网络请求。
要确保缓存生效，请注意以下几点：
立即学习“Java免费学习笔记（深入）”；
- 为每个类型提供唯一的 id 或配置 keyFields 来定义缓存键
- 避免在不同查询中对同一实体使用不一致的字段结构
- 启用 cache-and-network 模式时，先展示缓存内容再更新
手动更新缓存的常用方法
当执行修改操作（如添加、删除、更新）时，服务器数据已变，但缓存不会自动同步。这时需要手动干预缓存。
常用方式包括：
- update 回调：在 useMutation 中使用 update 函数直接修改缓存
- cache.writeQuery / writeFragment：向缓存写入特定查询或片段数据
- cache.readQuery / readFragment：读取当前缓存中的数据用于判断或合并
示例：新增评论后更新文章评论列表
![PHP房产程序[BBWPS]](https://img.php.cn/upload/webcode/000/000/017/176518440895337.jpg)
[PHP房产程序|BBWPS]功能介绍 1、5种信息类别发布：出租、求租、出售、求购、楼盘信息,支持会员发布信息审核； 2、灵活的信息参数设置； 3、充足的信息字段； 4、简单易用的发布/编辑功能，支持配图上传； 5、灵活的信息管理功能； 6、信息输出伪静态，方便搜索引擎抓取数据； 7、支持RSS输出； 8、内置数据高速缓冲技术，可灵活设置缓冲功能是否启动及过期时间； 9、支持 Google 地图
useMutation(ADD_COMMENT, {
update(cache, { data: { addComment } }) {
const query = GET_POST;
const variables = { id: '123' };
const data = cache.readQuery({ query, variables });
if (data) {
cache.writeQuery({
query,
variables,
data: {
post: {
...data.post,
comments: [...data.post.comments, addComment]
}
}
});
}
}
});
处理无唯一标识的数据与自定义缓存键
某些对象可能没有全局唯一的 id，比如分页列表、临时数据等。此时可自定义 keyFields 来构建缓存键。
例如，一个按页码和关键词缓存的搜索结果：
new InMemoryCache({
typePolicies: {
SearchResult: {
keyFields: ['keyword', 'page']
}
}
})
这样即使没有 id，Apollo 也能正确识别并缓存不同条件下的结果。
清理和重置缓存的时机
缓存过多或过期数据会影响内存和准确性。可通过以下方式管理：
- 调用 cache.evict() 移除特定条目
- 使用 cache.gc() 手动触发垃圾回收
- 登录切换用户时调用 client.resetStore() 清空并重新加载所有活动查询
- 登出时使用 client.clearStore() 仅清空数据而不重发查询
合理选择清理方式，避免误删仍在使用的数据。
基本上就这些。掌握这些技巧后，你能更好地控制 Apollo Client 缓存行为，让应用更高效稳定。关键在于理解数据流向，并在变更时及时同步缓存。
