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

Question

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

у меня есть 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 запрос выглядит так:

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

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

Answer 1

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

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

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

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