Correct approach for TanStack Router Infinite Data
Curious if there exists an objectively correct strategy for Router data loaders for infinite queries -- is it a ensureQueryData for the first page, then a useinfinitequery in the body to fetch the rest?
1 Reply
statutory-emerald•3w ago
I think the TLDR; would likely be no, there is not. Because there is no objective way to do even normal queries, it all comes down to your use case and preferences in combining the two.
Subjectively speaking though, it should be the exact same approach as with normal queries, and it depends on your use case or how you prefer to use the router with query.
Personally, I always prefer to call prefetch in the loader, which enables route prefetching, while ensuring that you are not blocking loading the route, followed by calling
useInfiniteQuery in the component so that you can reactively get the loading states and fetch more data after loading.
The only reason I personally suggest prefetch over ensureQueryData is so that your route will never error, and you can handle it in the component, and if you really want to have the routes errorComponent handle the error, using a suspense query will still ensure that happens.
But yes, to your original suggestion, this is what I would do. Fetch the first, or however many pages you need on first loader run, and then if the user needs more data, they can fetch it using the query.