Реализация фильтрации на стороне клиента с помощью кэша состояния ссылок Apollo - PullRequest
Новая
       10

Реализация фильтрации на стороне клиента с помощью кэша состояния ссылок Apollo

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

Можно ли запросить кеш клиента Apollo, чтобы получить список отфильтрованных данных на клиенте?

После того, как клиент получает данные с сервера graphql, эти данные можно увидеть как находящиеся в локальном кэше из инструментов разработчика Apollo.

Как я могу получить список типов «Предметов», которые соответствуют набору «тегов», не совершая поездку на сервер? 

type Item {
 id: ID
 text: String
 tags: [String]
}

Я бы предположил, что это возможно при использовании пользовательских распознавателей Apollo-link-state, но до сих пор не смог выяснить стратегию для него или найти пример где-либо в Интернете.

Мне известно, что Apollo кеширует данные по выполненным запросам и может обращаться к ним с помощью идентификатора и .readFragment, но если данные уже существуют в клиентском кеше, должна быть возможность получить список данные для определенного условия?

Обновление:

Точное требование следующее

  1. Получить первые 100 результатов для getItem с сервера
  2. Пользователь фильтрует результаты по некоторым тегам на клиенте
  3. Показать отфильтрованные элементы из 100 уже выбранных записей
  4. FetchMore записей, чтобы соответствовать критериям фильтра с сервера, чтобы заполнить оставшуюся часть страницы до 100 элементов.
  5. Разрешить разбиение на страницы на основе критериев фильтра.

По мере увеличения использования у нас будет большинство элементов в кеше, обеспечивающих мгновенную фильтрацию большинства данных.

Точный вопрос: можем ли мы использовать .readFragment или .readQuery для доступа к необработанному списку записей и фильтрации на лету в клиенте (если да, то как / пример)? Или есть другой способ посмотреть на это?

1 Ответ

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

Такая функциональность может быть достигнута с помощью apollo-link-state.

пример - «внутренний» запрос может быть принудительно установлен cache-only при fetchPolicy

Также рассмотрим простую фильтрацию в состоянии компонента (или другие опции - все зависит от (совместного использования отфильтрованного результата) требований.

...