Как обрабатывать обновления кэша Apollo для запросов с несколькими аргументами (например, табличные данные) - PullRequest
Новая
       67

Как обрабатывать обновления кэша Apollo для запросов с несколькими аргументами (например, табличные данные)

0 голосов
/ 24 февраля 2019

Краткий обзор моей проблемы

У меня есть запрос getTracks, который будет извлекать данные отслеживания и принимает несколько аргументов для сортировки / фильтрации (предел, смещение, поиск, сортировка, порядок).К сожалению, Apollo кэширует все это по отдельности, поэтому, когда элемент удаляется в одном представлении, пользователь изменяет порядок сортировки, а удаленный элемент остается там (потому что он находится в кеше для другого набора аргументов).

Подробности

Это запрос getTracks вместе с соответствующим типом ввода (в моей серверной схеме AppSync): 

input SelectOptions {
  limit: Int
  offset: Int
  sort: String
  order: String
  search: String
}

type Query {
  getTracks(options: SelectOptions): TrackList!
}

type TrackList {
  total: Int!
  items: [Track!]!
}

В клиенте Vue запрос выглядит следующим образомthis: 

query GetTracks($options: SelectOptions) {
  getTracks(options: $options) {
    total
    items {
      id
      name
      runtime
      createdAt
      metadata {
        trackNum
        trackName
        artistName
        albumName
        year
      }
    }
  }
}

При первом отображении таблицы элементы загружаются и отображаются нормально (по умолчанию создается порядок сортировки At / desc).Если я сортирую по созданному At / asc, то делается сетевой запрос на получение результатов, и они отображаются нормально.Теперь, если я удаляю одну из записей, а затем снова сортирую по созданному Att / desc, удаленный элемент отображается, поскольку он вытаскивает его из кэша.

Нет ли в Apollo способа, чтобы он разумно прошели удалить (или добавить / изменить) элементы из кэша, даже если запрос имеет разные аргументы?Я попробовал директиву @connection , как описано здесь , но это просто сделало так, что сортировка таблицы не имела никакого эффекта (она вообще не будет извлекаться с сервера).

IЯ полностью застрял и готов полностью отключить кэширование, потому что, похоже, оно не работает в реальных сценариях.Как я могу сохранить политику по умолчанию cache-and-network, но заставить мои таблицы работать правильно при изменении данных?

1 Ответ

0 голосов
/ 25 февраля 2019

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

Следующийлучшее, что вы можете сделать, это использовать apollo-link-watched-mutation .Ссылка позволяет нам эффективно идентифицировать один или несколько запросов, которые необходимо обновить для каждой мутации, но использует имена операций для идентификации запросов (и какие мутации должны их инициировать).Таким образом, вам даже не нужно знать соответствующие переменные для обновления запроса - вам просто нужно последовательно называть свои операции. 

new WatchedMutationLink(
  cache,
  {
    SaveTodo: {
      TodoList: ({ mutation, query }) => {
        // update logic here
      }
    }
  }
)

Недостатком этого подхода является то, что вы теряете способностьопределите свою update логику для каждого компонента.Однако вы также можете обойти это ограничение, используя мутации с разными именами.

...