Apollo调用readQuery从缓存获取数据返回null的问题求助

核心原因 #

• Apollo InMemoryCache默认使用id字段作为实体的缓存主键，你的Recruit实体主键为_id，未做配置的情况下缓存无法正确识别关联记录
• client.readQuery()只能读取已发起过的、查询+变量完全匹配的请求缓存结果，若你从未携带对应selectedId执行过RECRUIT_QUERY查询，哪怕缓存中存在对应Recruit实体，也会返回null

修复步骤 #

1. 修正缓存主键配置 #

修改Apollo Client初始化时的缓存配置，指定Recruit类型的主键字段为_id：

export const client = new ApolloClient({
  link: concat(
    authMiddleware,
    new HttpLink({
      uri: process.env.REACT_APP_API_URL,
    }),
  ),
  cache: new InMemoryCache({
    typePolicies: {
      Recruit: {
        keyFields: ["_id"]
      }
    }
  }),
});

2. 调整缓存读取方式 #

若要直接读取归一化缓存中的单个实体，使用client.readFragment()而非readQuery()：

const client = useApolloClient();
const recruit = client.readFragment({
  id: `Recruit:${selectedId}`, // 缓存实体唯一标识，格式为「类型名:主键值」
  fragment: gql`
    fragment RecruitFields on Recruit {
      _id
      firstName
    }
  `
})

3. （可选）保留readQuery的适配方案 #

如果你一定要使用readQuery，需要保证此前已经携带相同的id变量执行过一次RECRUIT_QUERY请求，同时确认selectedId的类型、值和缓存中的_id完全一致（字符串和数字格式的相同值会被判定为不匹配）。

内容的提问来源于stack exchange，提问作者greg