How to fetch infiniteQuery out of order

[literalpie]

We use infinite queries to fetch data for very large smooth scrolling lists. If the user scrolls to the middle, React Query v4 lets us do something like: fetchNextPage({pageParam: {offset: 10_000, limit: 100}}). Unfortunately, this is no longer possible in React Query v5. Does anyone have a good pattern on how to do this?

So far the best ideas I can think of are:

• Keep track of the last item index that we need to show, and make a useEffect that repeatedly does fetchNextPage until we have the required number of items. In a list with 10s of thousands of items, this would be too many requests.
• Instead of infiniteQuery, use a regular query with queryKeys for each "page" of items. This would be pretty complicated to do.

[TkDodo]

We removed the manual pageParam setting because it wasn't working at all with refetches - the manual pageParam wasn't considered there, and it would be computed with getNextPageParam, thus showing completely wrong results after a refetch. That's the main reason why we removed it.

Keep track of the last item index that we need to show, and make a useEffect that repeatedly does fetchNextPage until we have the required number of items. In a list with 10s of thousands of items, this would be too many requests.

This is the best idea I can think of, but instead of actually fetching those thousands of pages, I would just have the queryFn return empty entries instead. You can also achieve that with setQueryData. For example, if this is your cache structure (with an initialPageParam of 1):

pages: [{ items: [1,2,3], next: 4 }, { items: [4,5,6], next: 7 }]
pageParams: [1, 4]

and the next thing you want to fetch is 100, you could just insert an "empty page" with setQueryData that has the correct nextPageParam, so:

pages: [{ items: [1,2,3], next: 4 }, { items: [4,5,6], next: 7 }, { items: [], next: 100 }]
pageParams: [1, 4, 7]

then, calling fetchNextPage should yield:

pages: [{ items: [1,2,3], next: 4 }, { items: [4,5,6], next: 7 }, { items: [], next: 100 }, { items: [100,101,102], next: 103 }]
pageParams: [1, 4, 7, 100]

just keep in mind that when refetches are done, we always compute the next page param from getNextPageParam. So if you get the second page and it says next:7, you kinda need to know that the next page is the "fake page" and act accordingly. It's probably best to note that somewhere in the pageParams for that page, too.