Разбиение курсора на Apollo / GraphQL, обновление итогового номера страницы после изменения данных - PullRequest
Новая
       10

Разбиение курсора на Apollo / GraphQL, обновление итогового номера страницы после изменения данных

0 голосов
/ 19 сентября 2018

Я реализовал Построение курсора на основе смещения с использованием 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 - это то, что многие элементы будут отображаться на странице и всего - это сколько всего элементов данных.

Чтобы получить все необходимые данные для этой таблицы, я создал запрос 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 элемент), но остальные остальные кеши имеют старый общее значение

Вопрос в том, как мы можемобновить итоговое значение pageNumber для разбивки на страницы с использованием кеша apollo graphql и запросов с некоторыми параметрами.

Есть ли какая-либо причина для передачи этого "общего числа" для других запросов?

Я обнаружил, что мы не можем "readQuery ", которого нет в хранилище - например, когда у нас есть 5 подстраниц и пользователь wa только на странице 1 и странице 3 - мы не можем просто перебрать все доступные" подстраницы "и обновить запрос с помощью" writeQuery "- потому что мы нене хватает страниц 2,4 и 5 в кеш аполлона.

...