Graphql 如何将apollo client fetchMore updateQuery转换为apollo缓存合并功能?
我正在学习apollo和graphQL,有一个显示数据列表的简单应用程序,还有一个添加到数组中的fetchMore函数 我想删除updateQuery,因为它已被弃用,并使用新的字段策略合并功能。当前缓存设置和更新程序如下所示:Graphql 如何将apollo client fetchMore updateQuery转换为apollo缓存合并功能?,graphql,apollo,react-apollo,apollo-client,Graphql,Apollo,React Apollo,Apollo Client,我正在学习apollo和graphQL,有一个显示数据列表的简单应用程序,还有一个添加到数组中的fetchMore函数 我想删除updateQuery,因为它已被弃用,并使用新的字段策略合并功能。当前缓存设置和更新程序如下所示: const cache = new InMemoryCache({ typePolicies: { client_client: { fields: { // add local only value to clients
const cache = new InMemoryCache({
typePolicies: {
client_client: {
fields: {
// add local only value to clients
isEdited: {
read(value = false) {
// when writing the new value return new value or false as default
return value;
},
}
}
}
}
});
但是,我似乎无法让它在apollo client v3的缓存中作为合并函数工作。我曾尝试在许多不同的地方添加合并,但它似乎总是破坏应用程序
请提供有关如何执行此操作的任何帮助。根据文档,在
InMemoryCache
构造函数中提供的TypePolicys
选项中定义字段策略:
然后您只需将偏移量
和限制
传递给初始查询:
和fetchMore
以获得下一次迭代:
在此处签出文档:
const onFetchMore = () => {
fetchMore({
variables: {
offset: page
},
updateQuery: (previousResult, { fetchMoreResult, queryVariables }) => {
return {
...previousResult,
client_client: [
...previousResult.client_client,
...fetchMoreResult.client_client,
],
};
},
});
}
const cache = new InMemoryCache({ typePolicies: {
Query: {
fields: {
feed: {
// Don't cache separate results based on
// any of this field's arguments.
keyArgs: false,
// Concatenate the incoming list items with
// the existing list items.
merge(existing = [], incoming) {
return [...existing, ...incoming];
},
}
}
} } })
const { loading, data, fetchMore } = useQuery(GET_ITEMS, {
variables: {
offset: 0,
limit: 10
},
});
fetchMore({
variables: {
offset: 10,
limit: 10
},
});