When to use tanstack query for loader functions
Hey all,
Following the example here: https://tanstack.com/router/v1/docs/framework/react/guide/external-data-loading
I am using ensureQueryData in my loader to fetch data.
I am questioning the benefit of using loader functions in my app at all, its a complete SPA. Using this method, Im not a fan of missing out on some of the typical react query functionality, such as refetching on window focus.
Wondering what the use case is for loaderFn? I find I would have much more rich functionality just fetching in my components, considering my app is a SPA. But wanted to hear other opinions!
External Data Loading | TanStack Router React Docs
[!IMPORTANT] This guide is geared towards external state management libraries and their integration with TanStack Router for data fetching, ssr, hydration/dehydration and streaming. If you haven't rea...
3 Replies
like-gold•5mo ago
why would you miss out on any react query functionality?
you still use query hooks such as
useSuspenseQuery
the loader just helps with preloadingrare-sapphire•5mo ago
You can do critical data: await ensureQueryData and call useSuspenseQuery or non critical data: preload but don't await in the loader, have
UseSuspenseQuery in a child suspense boundary or even just normal useQuerystormy-gold•5mo ago
you are not loosing any benefits, you are just enlaring the possibilities: maybe throw 404 in loader, combine more than one query but only have one loading indicator and many more. I use this approach in my SPA and it works very well especially for data in my root layout setting the context of the user