Apollo Client readQuery返回null：电商缓存过滤分页问题排查

1. 缓存键（Cache Key）不匹配 #

Apollo Client 缓存基于查询名称+变量组合生成唯一键，哪怕变量的类型、顺序有细微差异，都会导致缓存键不匹配：

• 检查变量类型：比如 potency 是传字符串还是数字，初始查询与 readQuery 的变量类型必须完全一致
• 核对变量结构：确保 readQuery 的变量对象和初始查询的变量结构、顺序完全一致
• 直接验证缓存键：通过 Apollo DevTools 的 Cache 标签，查看对应查询的缓存条目，确认 readQuery 使用的变量组合是否存在缓存记录

2. 查询字段不完全匹配 #

readQuery 要求查询的字段（包括嵌套字段、别名）必须和缓存中存储的完全一致：

• 对比初始查询与 readQuery 的 ALL_PRODUCTS_FILTERED_QUERY 定义：检查是否漏写嵌套字段、别名是否一致，甚至字段顺序是否完全匹配
• 避免动态字段：如果初始查询有动态生成的字段，readQuery 必须使用完全相同的字段列表

3. 分页数据的缓存存储逻辑问题 #

如果查询包含分页参数（如skip/take），缓存中存储的是每个分页对应的独立条目，而非合并的全量数据：

• 若你想读取所有过滤后的商品而非单页数据，初始查询可能未缓存全量数据，导致 readQuery 返回 null
• 解决分页过滤联动：使用 Apollo 的@connection指令自定义缓存键，将相同过滤条件下的分页数据合并到同一缓存条目，实现全量过滤数据的缓存读取

4. 缓存写入规则问题 #

如果初始查询的缓存写入逻辑有问题，会导致对应数据未被存入缓存：

• 检查初始查询的fetchPolicy：若使用no-cache或network-only，数据不会写入缓存，readQuery自然无法读取
• 核对手动缓存更新逻辑：如果有手动更新缓存的代码，确认更新的缓存键与 readQuery 使用的键完全一致

5. 后端返回数据的结构差异 #

Keystone.js 后端返回的字段可能与查询预期存在差异（如 null 值、字段大小写），导致缓存结构不符合预期：

• 通过 Apollo DevTools 查看缓存中的数据结构，确认ALL_PRODUCTS_FILTERED_QUERY对应的缓存条目是否存在，数据结构是否符合查询定义

快速验证步骤 #

1. 打开 Apollo DevTools 的 Cache 标签，搜索ALL_PRODUCTS_FILTERED_QUERY，查看对应变量的缓存条目是否存在
2. 复制缓存条目的变量，直接传入 readQuery 测试是否能读取数据
3. 在控制台执行client.cache.readQuery({ query: ALL_PRODUCTS_FILTERED_QUERY, variables: 你的变量 })，查看返回结果与可能的错误信息

内容的提问来源于stack exchange，提问作者Benjamin Nathan Rudolph