Pattern for automatic chunked loading of large results?

[AlanGreene]

I'm consuming a set of APIs that can potentially return a very large number of results and hoping useInfiniteQuery or similar might help. Standard user-driven pagination / infinite scrolling is not an option for a number of reasons beyond my control, so I'm looking to automatically load all chunks in the background, progressively displaying results as they're received.

The APIs support returning smaller chunks of results using a combination of a limit param to set the page size, and an opaque token which is returned in the chunked responses to fetch the next chunk. This seems like it should be a good match for useInfiniteQuery.

Is there an established pattern that would facilitate automatically loading all available chunks from such an API without user interaction? i.e. while hasNextPage { fetchNextPage }

I've tried a few approaches so far without much luck. I've run into situations where it either stops after the second chunk, or loops infinitely. This seems like it should be reasonably straightforward to achieve, I think I'm just missing the right connections between the pieces.

Any guidance would be greatly appreciated 🙏

Update:

I took another look at this today and it worked first time in a codesandbox using one of the approaches I'd tried previously.

There must be something strange going on in my app so I'll have to debug that but at least now I know it should work 👍

Any thoughts on this approach / suggestions for improvement / other things I should be aware of?
https://codesandbox.io/s/react-query-useinfinitequery-autoload-f5ykj

[AlanGreene]

🤦 figured it out, the real API is returning an empty string for the value used as nextPageParam in some cases. This was being passed through to the next iteration and essentially resetting us back to the first page.