Apollo是否缓存Query组件查询？子组件读缓存报错咨询

嘿，我完全理解你的困惑——明明父组件已经把数据加载进缓存了，子组件却读不到，这确实让人挠头。结合Apollo缓存的工作机制，我帮你梳理几个最可能的原因和解决办法：

1. 查询的「唯一标识」不匹配 #

Apollo缓存是靠查询字符串+变量生成唯一键的，只要子组件的readQuery和父组件的查询有一点差异（哪怕是字段顺序、多/少字段、变量没传对），Apollo都会认为这是两个完全不同的查询，自然找不到缓存数据。

举个例子：
父组件的查询是：

query GetUser($userId: ID!) {
  user(id: $userId) {
    id
    name
    todos {
      id
      text
      completed
    }
  }
}

如果子组件的readQuery用了这个查询，但没传$userId变量，或者查询的todos少了completed字段，缓存就会找不到对应的条目。

解决办法：
确保子组件readQuery的查询语句、变量和父组件的完全一致。比如子组件里应该这样写：

import { useApolloClient } from '@apollo/client';
import GetUser from './queries/GetUser';

const ChildComponent = () => {
  const client = useApolloClient();
  try {
    const { user } = client.readQuery({
      query: GetUser,
      variables: { userId: '你父组件用的用户ID' } // 必须和父组件的变量完全匹配
    });
    const todos = user.todos;
    // 渲染todos
  } catch (error) {
    console.error('缓存读取失败:', error);
  }
};

2. 缓存的「规范化结构」导致数据不在预期位置 #

如果父组件查询的是嵌套数据（比如user.todos），而子组件直接查询顶层的todos，Apollo的规范化缓存会把数据按类型+ID存在单独条目里，不会自动生成顶层todos的缓存结果。

比如父组件查了user { todos { id text } }，缓存里会存User:123和每个Todo:456、Todo:789的条目，但不会有Query.todos的缓存。这时候子组件直接查query { todos { id text } }自然找不到数据。

解决办法：

• 要么子组件通过父组件的查询路径读取数据（比如上面例子里的user.todos）；
• 要么配置字段政策（Field Policies），让顶层todos查询返回缓存里的所有Todo条目：

// 在ApolloClient初始化时配置
const client = new ApolloClient({
  cache: new InMemoryCache({
    typePolicies: {
      Query: {
        fields: {
          todos: {
            read(_, { cache }) {
              // 从缓存里读取所有Todo类型的条目
              const allTodoIds = cache.prefixQuery({ __typename: 'Todo' });
              return allTodoIds.map(id => cache.readFragment({
                id,
                fragment: gql`
                  fragment TodoData on Todo {
                    id
                    text
                    completed
                  }
                `
              }));
            }
          }
        }
      }
    }
  }),
  // 其他配置...
});

3. 缓存写入的时机问题 #

虽然你说子组件绝不会在父组件之前加载，但有可能父组件的查询还没完成缓存写入，子组件就执行了readQuery？不过这种情况概率很低，除非父组件用了特殊的fetchPolicy（比如no-cache，这种情况下数据不会写入缓存）。

检查办法：
在父组件的Query组件里打印data，确认数据加载完成后再渲染子组件；同时在子组件里用client.cache.extract()打印缓存内容，看看你要的数据是否真的存在：

// 子组件里打印缓存
console.log('当前缓存内容:', client.cache.extract());

快速排查步骤总结 #

1. 对比父组件和子组件的查询语句+变量，确保完全一致；
2. 打印缓存内容，确认目标数据是否存在；
3. 检查缓存的规范化结构，确认子组件的查询路径是否匹配缓存中的数据位置；
4. 若需要跨查询读取数据，配置字段政策来处理。

内容的提问来源于stack exchange，提问作者Paul Razvan Berg