在使用Apollo客户端的React项目中,可以使用useQuery hook来执行GraphQL查询并从缓存中获取结果。
如果查询中包含变量,当变量值更改时,Apollo客户端查询缓存可能不会更新。这是因为Apollo缓存默认情况下使用查询的哈希值作为键来存储结果,而不是将查询的变量值作为键。
为了解决这个问题,我们需要使用Apollo提供的merge函数来自定义缓存键。我们可以将变量值作为查询的一部分,并使用merge函数来创建一个新的缓存键。
例如,假设我们有一个查询:
query GetUser($id: ID!) {
user(id: $id) {
id
name
}
}
使用useQuery hook执行查询:
const { loading, error, data } = useQuery(GET_USER, {
variables: { id: userId },
});
当我们更改变量值时,缓存不会更新:
// change variables
const { loading, error, data } = useQuery(GET_USER, {
variables: { id: newUserId },
});
// data will still have the previous user's data
为了解决这个问题,我们可以使用merge函数自定义查询的缓存键:
const { loading, error, data } = useQuery(GET_USER, {
variables: { id: userId },
// customize cache key with variables
fetchPolicy: 'cache-and-network',
nextFetchPolicy: 'cache-first',
keyArgs: ['id'],
// merge function to use variables in cache key
// keyArgs will be passed as arguments to the merge function
// and return an object used as the new cache key
// the new cache key will include the variable values
// so that the cache can be updated when the variables change
// Note: this example only includes one variable, but you can include multiple keyArgs
merge(existing, incoming, { args }) {
const id = args.id;
return {