游标分页Apollo / GraphQL,在更新数据后更新总页数

时间:2018-09-19 13:53:21

标签: reactjs graphql apollo react-apollo apollo-client

我使用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页。

0 个答案:

没有答案