Как не получать кешированные данные в ответном запросе?
У меня есть запрос, который извлекает некоторые данные в диапазоне дат. Недавно я перешел от этого сам к использованию реагирования-запроса и застрял на логике кеша. Я хочу, чтобы если этот диапазон дат был выбран один раз, он дал мне данные, в противном случае он извлекает данные и, конечно же, сохраняет их с текущим диапазоном дат.
Я попробовал это
const { data, isFetching} = useQuery({
queryKey: ["key1", startDate, endDate],
queryFn: () => getData(startDate, endDate),
initialData: [],
});
что дало мне то, что я хотел, но также и нет. Моя проблема в том, что когда я смотрю на вкладку сети, которую я вижу при первой загрузке, она извлекает данные, отлично. затем я перехожу на другой диапазон дат, и он извлекает эти данные, тоже идеально. но затем я возвращаюсь к первому диапазону дат и вижу, что старые данные отображаются напрямую, НО я вижу запрос на них на вкладке сети.
Как я могу это остановить!
это также вызывает у меня проблемы, потому что я использую isFetching для отображения некоторого наложения загрузки, поэтому, хотя я ясно вижу, что данные уже отображены, мне все равно приходится ждать, и, наконец, вызов API немного дороже на сервере, поэтому я не не хочу получать, если у меня уже есть кеш
Ответы 2
Я думаю, вы можете добиться этого, используя функцию ensureQueryData. Я нашел этот пример в документации:
const data = await queryClient.ensureQueryData({ queryKey, queryFn })
Таким образом, вы сначала проверяете кеш для данного ключа, и если ничего не найдено, вы запускаете функцию и возвращает результат.
Другой вариант может заключаться в том, чтобы создать собственный крючок, использующий getQueryData для чтения кеша, и если ничего не будет найдено, он вернет неопределенное значение, чтобы вы могли вызвать свой API, но я думаю, что это должно работать «из коробки» и достичь того же самого.
Это ссылка на всю документацию.
здесь я подготовил вам небольшой пример: stackblitz.com/edit/… при первом нажатии на разные символы делается запрос к API, но при втором нажатии на тот же символ мы читаем кеш данные. Я использую queryClient.ensureQueryData вместе с useQuery, используя тот же queryKey для загрузки существующих данных, которые могут быть доступны в кеше, на случай, если их нет, мы получаем их из API, как обычно. Я также настроил кеш staleTime: Infinity на вечное использование, но вам следует настроить его под свои нужды.
игнорировать неправильный tsconfig в моем проекте :)
Спасибо большое, это очень красиво обрамляет
useQuery с staleTime: Infinity здесь поможет. queryClient.ensureQueryData не обязательно.
Я хочу, чтобы если этот диапазон дат был выбран один раз, он дал мне данные, в противном случае он извлекает данные и, конечно же, сохраняет их с текущим диапазоном дат.
Вам нужно установить staleTime на Infinity, чтобы указать React Query никогда не извлекать данные, которые уже кэшированы.
Прежде всего, большое спасибо за ваш ответ, во-вторых, я немного запутался в документации: когда я хочу получить что-то в своем коде, я использую перехватчик useQuery, как мне получить доступ к queryClient. мне просто импортировать его и использовать напрямую, не будет ли это «конфликтовать» с параметрами по умолчанию, которые я установил для провайдера в файле приложения