我使用apollographql（https://www.apollographql.com/docs/react/features/pagination.html）实现了 Offset-based 游标分页 . 为了显示获取的数据，我们使用了来自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 是所有数据项的数量 .
要获取此表的所有必要数据，我已使用filter和pagination参数创建了graphql查询：
query test($filter: DictionaryEntryFilter, $paginator: Paginator) {
test (filter: $filter, paginator: $paginator) {
total
data {
id
aaa
bbb
...
}
}
}
一切看起来都有效 - 数据是按照分页页面正确下载的 - 每个子页面都有自己的apollo缓存 - 而且我发现并尝试修复问题 .
通过进行样品突变，例如删除数据：
mutation removeMutation($id: Int!) {
removeMutation(id: $id) {
id
}
}
之后我们将使用“update”方法更新apollo缓存中的数据，例如：
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 缓存，用于我们执行变异的一个子页面（此子页面缓存知道有总计 - 1项） - 但是其他缓存的休息时间总共 old
问题是我们如何使用graphql apollo缓存和带有一些参数的查询来更新页面总页数以进行分页 .
有没有什么可以为其他查询传递这个“总计”？
我发现我们不能在存储中存在“readQuery” - 例如，当我们有5个子页面而用户只在第1页和第3页上时 - 我们不能只迭代所有可用的“子页面”并更新使用“writeQuery”查询 - 因为我们在apollo缓存中没有丢失页面2,4和5 .