Apollo readQuery，从缓存中获取数据答案

【问题标题】：Apollo readQuery, get data from cacheApollo readQuery，从缓存中获取数据
【发布时间】：2021-08-24 01:43:25
【问题描述】：

我正在尝试从 Apollo 缓存中获取数据。我知道数据在那里，因为在 Apollo 开发工具中指定的记录可用。在我的反应应用程序中，我进行了简单的单击并设置了稍后传递给查询的 Id。 client.readQuery(...) 的结果是 null。我在转，因为不知道为什么。我使用代码的方式与文档中完全相同。

这是一个查询：

export const RECRUIT_QUERY = gql`
  query Recruit($id: ID!) {
    Recruit(_id: $id) {
      _id
      firstName
    }
  }
`;

组件中apollo hooks的使用：

const client = useApolloClient();
const recruit = client.readQuery({
  query: RECRUIT_QUERY,
  variables: { id: selectedId }
})

apollo的配置：

export const client = new ApolloClient({
  link: concat(
    authMiddleware,
    new HttpLink({
      uri: process.env.REACT_APP_API_URL,
    }),
  ),
  cache: new InMemoryCache(),
});

这是 apollo 商店预览：

【问题讨论】：

insert debugger 并检查缓存是否真的包含这些条目（不要相信开发工具）......查询和规范化类型条目之间存在差异......你正在寻找@ 987654329@ ... 为什么不简单地将useQuery 与cache-only 字段策略一起使用？

标签： graphql apollo apollo-client react-apollo

【解决方案1】：

使用readFragment 可以满足我的期望。以前我尝试过这个解决方案但错误地，例如：

 client.readFragment({
   id: '4587d3c2-b3e7-4ade-8736-709dc69ad31b',
   fragment: RECRUIT_FRAGMENT,
 });

事实上，阿波罗商店找不到这条记录。正确的解决方案如下所示：

client.readFragment({
  id: 'Recruit:4587d3c2-b3e7-4ade-8736-709dc69ad31b',
  fragment: RECRUIT_FRAGMENT,
})

【讨论】：