Recommended way to load data with React Query/Router
Hello!
I recently discovered TanStack, it's pretty awesome!
I'm building a project with TanStack Query and TanStack Router. I read the documentation of TanStack router and it said that I should use a
loader to load data in a page. It makes sense, but I feel like it's kinda useless when using React Query (even though the examples uses React Query inside the loader function).
The loader's main goal is to load data asynchronously and cache it so that when ever the page is loaded, we use cache data until stale. That being said, React Query does pretty much the exact same thing (if I understood correctly, I may be wrong).
When using a loader, you need to "prop drill" the data down the component tree (or use useLoaderData({ from: "/" }) which is not ideal for component used on multiple pages).
I'm thinking about ditching the loader from TanStack Router and load data using React Query wherever I need to.
I would like to get some insights on this. I feel like I'm misunderstanding something...
Thanks everyone for your time/help!
(English is not my first language, sorry if I made mistakes)1 Reply
adverse-sapphire•2y ago
have a look at the examples. they show how you to use
ensureQueryData in the loader and useQuery in the component