Refetch only part of infinite query pages
Hello!
In the documentation for React Query: (https://tanstack.com/query/v4/docs/react/guides/infinite-queries#refetchpage) it is mentioned that there is a way to refetch only part of pages for an infinite query.
I was wondering if there's a way to specific a refetchInterval or staleTime in combination with specifying specific pages that should be refetched / become stale.
A use case for this is having a infinite query but for performance reasons wanting to only update the first 5 pages of it on a regular interval, fetching subsequent pages only once (and not having them being refetched or being stale).
Thank you in advance
Infinite Queries | TanStack Query Docs
Rendering lists that can additively "load more" data onto an existing set of data or "infinite scroll" is also a very common UI pattern. TanStack Query supports a useful version of useQuery called useInfiniteQuery for querying these types of lists.
When using useInfiniteQuery, you'll notice a few things are different:
3 Replies
like-gold•3y ago
the
refetchPage option has actually been removed in the next major version. It was a mistake to add that functionality. Only refetching the first 5 pages when 10 pages are rendered on the screen can easily lead to duplicate or missing entries
what we've added in v5 is a maxPages: number option, where you can decide how many pages should be kept in the cache. If you set it to 5, the first page will be moved out of the cache when page 6 comes in and so onconventional-tanOP•3y ago
I fully understand this possibility, and for our use case it's ok (to have some duplicate and/or missing items after the 5th page, for example). What would you suggest in that case? Create two separate infinite queries?
like-gold•3y ago
I think
maxPages is a good option if you want to limit how much gets refetched