我使用apollographql(https://www.apollographql.com/docs/react/features/pagination.html)实现了基于偏移量的光标分页。为了显示获取的数据,我们使用了来自Ant-designe(https://ant.design/components/form/)的组件。
因此,为使分页正常工作,我们必须发送两个参数:例如“ pageSize”和“ total”:
<Table
pagination={{
itemRender: (current: number, type: string): React.Node => <Pagination current={current} type={type} />,
onChange: this.onChangePaginationPage,
total,
pageSize: limit,
}}
/>
pageSize 所在的页面上有很多项,而 total 则是所有数据项的数量。
要获取该表的所有必要数据,我创建了带有过滤器和分页参数的graphql查询:
query test($filter: DictionaryEntryFilter, $paginator: Paginator) {
test (filter: $filter, paginator: $paginator) {
total
data {
id
aaa
bbb
...
}
}
}
一切似乎都可以正常工作-相对于分页页面正确下载了数据-每个子页面在阿波罗中都有自己的缓存-并且我发现了问题并试图解决。
通过执行样本突变,例如删除数据:mutation removeMutation($id: Int!) {
removeMutation(id: $id) {
id
}
}
之后,我们将使用“ update”方法来更新阿波罗缓存中的数据,例如:
const response: ?AllDictionaryEntries = cache.readQuery({
query: ALL_DICTIONARY_ENTRIES_QUERY,
variables: { filter: { dictionaryId }, paginator: { limit, page: pageNumber } },
});
const { data } = mutationResult;
if (response && data) {
const { allDictionaryEntries: { __typename, total } } = response;
const filteredData = response.allDictionaryEntries.data.filter((dictionary: DictionaryEntryType): boolean => (
+dictionary.id !== +data.removeDictionaryEntry.id));
cache.writeQuery({
query: ALL_DICTIONARY_ENTRIES_QUERY,
variables: { filter: { dictionaryId }, paginator: { limit, page: pageNumber } },
data: {
allDictionaryEntries: {
data: filteredData,
total: total - 1,
__typename,
},
},
});
这样一来,我们只为执行突变的一个子页面更新了此 ONE 缓存(此子页面缓存知道存在totat-1个项目),但其他缓存已经休息了 总价值
问题是我们如何使用graphql阿波罗缓存和带有某些参数的查询来更新用于分页的总pageNumber。
为什么要为其他查询传递此“总计”?
我发现我们无法“ readQuery”商店中不存在的内容-例如,当我们有5个子页面并且用户仅在页面1和页面3上时-我们不能仅遍历所有可用的“子页面”并使用“ writeQuery”更新查询-因为我们在阿波罗缓存中没有缺少第2、4和5页。