T
TanStack•3y ago
rival-black

Infinite query invalidation: pages revalidate serially

I have an infinite query, which I'm attempting to invalidate. By default it invalidates all active pages, which is good. Unfortunately, it's loading them serially. So if I've scrolled down far enough to have loaded page 4, react-query is basically doing 
await fetch("/data?page=1
await fetch("/data?page=2
await fetch("/data?page=3
await fetch("/data?page=4
await fetch("/data?page=1
await fetch("/data?page=2
await fetch("/data?page=3
await fetch("/data?page=4
is there any way to get this loading to happen in parallel, ie 
await Promise.all([fetch("/data?page=1"), fetch(.....
await Promise.all([fetch("/data?page=1"), fetch(.....
Ideally I'd love for this to work with the refetchPage - ie, return true or false for page 0, have it start loading immediately if true, with refetchPage being called again for page 2, without waiting for page 1 to come back, etc.
2 Replies
rival-black
rival-blackOP•3y ago
Sorry! I finally found the relevant portion of the docs https://tanstack.com/query/latest/docs/react/guides/infinite-queries#what-happens-when-an-infinite-query-needs-to-be-refetched
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:
unwilling-turquoise
unwilling-turquoise•3y ago
yeah it's serial on purpose. page2 needs to get its pageParam from the result of page1 etc if you have 4 pages in the cache, and you refetch, but everything except page1 was deleted in the meantime, we can stop refetching after page1 because getNextPageParam will tell us so

Did you find this page helpful?