TanStackT
TanStack•3y ago
dry-scarlet

useInfiniteQuery fetch multiple pages at once

Hey! I'm currently working on a virtualized list which loads the data lazily. Now, the pagination/lazy loading is straight forward with 
useInfiniteQuery
's API, however I'd also like to be able to jump to an item which isn't necessarily present on the client yet.

I've got a solution working, which uses 
useEffect
 and calls 
fetchNextPage
 as long as needed to reach a page with the wanted data in it. This obviously results in multiple requests and a 'rendering-cycle' like 
Request page => render => check if more pages needed => request page => render => check...
.
UX isn't really that nice, since its not a single request and render, but multiple request with multiple re-renders, resulting in the scroll bar jumping a lot. Obviously this also takes longer than having a single request.

Is there a built-in way to achieve something like this or would I need to solve this in user-land?

Would appreciate a hint towards the right direction.

Cheers
Was this page helpful?