Apollo Client未使用缓存数据反而发起网络请求问题排查

问题根源 #

你的问题出在Apollo缓存对关联字段（books）的匹配逻辑上：虽然Book类型的keyFields已配置，但Author类型的books字段缓存策略未明确，导致Apollo无法确认缓存中的Author条目已包含完整的books关联数据，从而触发网络请求。

具体解决方法 #

1. 显式配置Author类型的缓存策略 #

为Author类型添加typePolicy，明确其主键字段及books字段的合并/读取规则，确保缓存能正确关联已有的Book数据：

const cache = new InMemoryCache({
  typePolicies: {
    Book: {
      keyFields: ["code"],
    },
    Author: {
      // 显式指定Author的主键为id（默认规则也是id，显式配置避免歧义）
      keyFields: ["id"],
      fields: {
        books: {
          // 列表字段使用合并策略，保留已有缓存数据
          merge(existing, incoming) {
            return existing ? [...existing, ...incoming] : incoming;
          },
        },
      },
    },
  },
});

2. 验证缓存中的Author条目结构 #

使用Apollo DevTools检查缓存中的Author对象，确认：

• Author条目存在（格式如Author:{"id":"xxx"}）
• 该条目下的books字段是Book类型的引用数组（格式类似[{"__ref": "Book:{"code":"123"}"}]）
• 对应的Book缓存条目包含code和name字段（你已确认这一步，可跳过）

3. 配置查询缓存重定向（可选） #

如果上述配置仍未生效，可通过Query类型的fieldPolicy，显式让单个Author查询从Authors列表缓存中读取数据：

const cache = new InMemoryCache({
  typePolicies: {
    Book: {
      keyFields: ["code"],
    },
    Query: {
      fields: {
        author: {
          read(_, { args, cache }) {
            // 从缓存的Authors查询结果中匹配目标作者
            const cachedAuthors = cache.readQuery({ query: Authors })?.authors;
            return cachedAuthors?.find(author => author.id === args.id);
          },
        },
      },
    },
  },
});

4. 确认两个查询的字段完全一致 #

检查Authors和Author查询中books字段的子字段（code、name）是否完全匹配，字段缺失或差异会导致Apollo判定缓存数据不完整，触发网络请求。

内容的提问来源于stack exchange，提问作者As above so below