React Query FAQ
Доминик Дорфмайстер, один из разработчиков библиотеки React Query, написал в своем блоге FAQ по библиотеке react-query, в которой ответил на наиболее популярные вопросы.
- Как передать параметр в refetch? Если кратко, то это сделать нельзя, т.к. нарушается принцип работы react-query. React-query кэширует результат запроса по ключу, переданному в хук в первом параметре, поэтому refetch только повторяет запрос. Если нужно выполнить refetch с другими параметрами, то это значит, что нужно сделать новый запрос с новым ключом.
const { data } = useQuery(['item', id], () => fetchItem({ id }))
- Состояние загрузки. Чтобы сохранить предыдущее значение data при изменении ключа до загрузки новых данных, можно использовать параметр keepPreviousData. Дополнительно можно использовать флаг isPreviousData, который обозначает что в data находится устаревшее значение.
const { data, isPreviousData } = useQuery(
['item', id],
() => fetchItem({ id }),
{ keepPreviousData: true }
)
- Почему не обновляется кэш? При работе напрямую с Query Cache бывают моменты, когда кэш не обновляется. Одна из причин – не совпадают ключи. Когда вызываете queryClient.setQueryData, ключи запроса должны полностью совпадать с существующими. Например, следующие ключи не будут совпадать, потому что ‘1’ !== 1:
['item', '1']
['item', 1]
Еще одна возможная причина того, что не обновляет кэш – нестабильная ссылка на QueryClient в QueryClientProvider. Лучше всего объявлять QueryClient вне компонента, но если нужно объявить его внутри компонента, то объявляйте внутри рефа или useState:
export default function App() {
const [queryClient] = React.useState(() => new QueryClient())
return (
<QueryClientProvider client={queryClient}>
<Example />
</QueryClientProvider>
)
}
https://tkdodo.eu/blog/react-query-fa-qs
