Apollo GraphQL Caching Questions (cacheRedirects and readFra

Question

我是阿波罗和阿波罗缓存的新手。 我一直在编写一个演示项目，遇到了两个问题：

1. 无法让cacheRedirects正常工作：

在我的演示中，我"全部加载"COVID19测试数据，该数据查询 API 并返回包括加拿大在内的 3 个国家/地区的结果数组。然后，我尝试加载单个结果("加载加拿大"(，使其使用我的cacheRedirects解析器。 我想我设置正确，但它总是回到 API 进行查询，而不是从缓存中读取。

这是我的带有缓存的阿波罗客户端：

const client = new ApolloClient({
uri: "https://covid19-graphql.now.sh",
cache: new InMemoryCache({
dataIdFromObject: obj => {
console.log("in cache: obj:", obj);
let dataId = null;
switch (obj.__typename) {
case "Country":
dataId = obj.__typename + "_" + obj.name;
break;
default:
dataId = defaultDataIdFromObject(obj);
}
console.log("in cache: dataId:", dataId);
return dataId;
},
cacheRedirects: {
Query: {
country: (_, args, { getCacheKey }) => {
console.log("in cacheRedirects:", _, args);
const cacheKey = getCacheKey({ __typename: "Country", ...args });
console.log("cacheKey:", cacheKey);
return cacheKey;
}
}
}
})
// connectToDevTools: true
});

2. 我不知道如何执行readFragment：

我在此代码中尝试了许多不同的配置，但从未得到任何结果。

这是我的函数：

const ReadFragment = () => {
console.log("in ReadFragment");
try {
const data = client.readFragment({
id: GET_DATA.countryData,
fragment: gql`
fragment mostRecent on country {
id
text
complete
}
`
});
if (data) {
console.log(data);
return (
<div>
From Fragment: {JSON.stringify(data)}
</div>
);
} else {
return <div>From Fragment: not found</div>;
}
} catch (error) {
// console.error(error);
return <div>From Fragment: not found</div>;
}
};

奖励问题：我似乎无法让阿波罗客户端开发人员工具扩展在Chrome浏览器中工作。 这还有效吗？我的代码似乎从未连接到它。(取消注释掉connectToDevTools: true。 似乎能够检查缓存的内容对于开发和学习非常有用。 是否有查看缓存内容的替代方法？

Answer 1

Apollo GraphQL 维护缓存本身，当然你不必 -

export declare type FetchPolicy = 'cache-first' | 'network-only' | 'cache-only' | 'no-cache' | 'standby';

如果您查看 fetchPolicy 声明，那么有几个选项可以做到这一点 -

1. 仅网络

   const { data } = useQuery(GET_LIST, {
   fetchPolicy: 'network-only'
   });
   

2. 缓存优先

   const { data } = useQuery(GET_LIST, {
   fetchPolicy: 'cache-first'
   });
   

3. 仅缓存

   const { data } = useQuery(GET_LIST, {
   fetchPolicy: 'cache-only'
   });
   

同样，也可以根据需要查看其余选项。

如果你想维护状态并做一些工作，那么为这些查询编写解析器 -

const client = new ApolloClient({
uri: apollo.networkInterface,
cache,
resolvers: {
Mutation: {
searchQuery: (launch, _args, { cache }) => {
console.log(cache); // cache can be queried here
// read from cache if planning to modify the data
//const { searchQuery } = cache.readQuery({ query: GET_LIST });
cache.writeQuery({
query: GET_LIST,
data: {searchQuery:_args.searchQuery}
});
},
},
},
})

Chrome 客户端确实可以工作，但为此必须完成与 graphql 服务器的连接。否则它不会显示在铬中。