Как обрабатывать обновления кеша Apollo для запросов с несколькими аргументами (например, табличных данных)
Краткий обзор моей проблемы
У меня есть запрос 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). Если я сортирую по createdAt/asc, выполняется сетевой запрос для получения результатов, и они отображаются нормально. Теперь, если я удалю одну из записей, а затем снова отсортирую по createdAt/desc, удаленный элемент будет показан, поскольку он извлекает его из кеша.
Нет ли в Аполлоне способа разумно пройти и удалить (или добавить/изменить) элементы из кеша, даже если запрос имеет разные аргументы? Я попробовал директиву @connectionкак описано здесь, но она просто сделала так, что сортировка таблицы не имела никакого эффекта (она вообще не загружалась с сервера).
Я полностью застрял и готов просто полностью отключить кеширование, потому что оно, похоже, не работает в реальных сценариях. Как я могу сохранить политику cache-and-network по умолчанию, но заставить мои таблицы вести себя правильно при изменении данных?
Ответы 1
К сожалению, этот вопрос уже поднимался и для него нет подходящего решения. Самая большая проблема заключается в том, что ни клиент, ни кеш не предоставляют никакого метода для получения всех запросов для данного запроса — если бы у вас была эта информация, вы могли бы перебирать запросы и соответствующим образом обновлять кеш.
Следующее лучшее, что вы можете сделать, это использовать Аполлон-ссылка-наблюдала-мутация. Ссылка позволяет нам эффективно идентифицировать один или несколько запросов, которые необходимо обновить для каждой мутации, но использует имена операций для идентификации запросов (и того, какие мутации должны их вызывать). Таким образом, вам даже не нужно знать соответствующие переменные для обновления запроса — вам просто нужно последовательно называть свои операции.
new WatchedMutationLink(
cache,
{
SaveTodo: {
TodoList: ({ mutation, query }) => {
// update logic here
}
}
}
)
Одним из недостатков этого подхода является то, что вы теряете возможность определять свою логику update для каждого компонента. Однако вы также можете обойти это ограничение, используя мутации с другими именами.
Спасибо! К сожалению, я нашел apollo-link-watched-mutation слишком сложным, на мой вкус, поэтому я просто написал свою собственную утилиту кэширования, которая отлично работает.
Если вы используете
cache.modfiyв опцииupdateмутации, она вызовет вашу функцию обратного вызова для всех вариантов аргументов, кэшированных для этого поля, что позволит вам удалить неопубликованную статью из любого из них.