17370845950

Apollo Client通过InMemoryCache实现高效缓存，需配置keyFields确保缓存键唯一，利用update回调或writeQuery手动更新，支持自定义缓存键处理无ID数据，结合evict、resetStore等方法合理清理缓存。

GraphQL 配合 Apollo Client 在现代前端开发中被广泛使用，其中缓存管理是提升性能和用户体验的关键环节。合理利用 Apollo Client 的缓存机制，可以减少重复请求、加快数据读取速度，并实现更流畅的交互体验。

理解 Apollo Client 默认缓存机制

Apollo Client 使用 InMemoryCache 作为默认缓存策略，它会自动将查询结果以对象形式存储，键由类型和 id 字段组合生成（即通过 __typename 和 id 构建缓存键）。

这意味着如果两个查询返回同一实体（例如用户信息），只要字段一致，后续查询可以直接从缓存中读取，无需发起网络请求。

要确保缓存生效，请注意以下几点：

• 为每个类型提供唯一的 id 或配置 keyFields 来定义缓存键
• 避免在不同查询中对同一实体使用不一致的字段结构
• 启用 cache-and-network 模式时，先展示缓存内容再更新

手动更新缓存的常用方法

当执行修改操作（如添加、删除、更新）时，服务器数据已变，但缓存不会自动同步。这时需要手动干预缓存。

常用方式包括：

• update 回调：在 useMutation 中使用 update 函数直接修改缓存
• cache.writeQuery / writeFragment：向缓存写入特定查询或片段数据
• cache.readQuery / readFragment：读取当前缓存中的数据用于判断或合并

示例：新增评论后更新文章评论列表

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 缓存行为，让应用更高效稳定。关键在于理解数据流向，并在变更时及时同步缓存。