Apollo readQuery，从缓存中获取数据

Posted 2023-03-10

【中文标题】Apollo readQuery，从缓存中获取数据

【英文标题】：Apollo readQuery, get data from cache

【发布时间】：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 字段策略一起使用？

【参考方案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,
)