Potential Redundancy Between TanStack Router and Query Features?

[eastack]

Do TanStack Router's Loader and Actions have overlapping functionality with TanStack Query's Queries and Mutations? If my understanding is incorrect, are there any examples combining the features of both?

[eastack]

For example: queryClient.invalidateQueries(...) and loaderClient.invalidateLoader(...). I feel very confused about this. How should I use both together or is using TanStack Router enough?

[eastack]

I think I understand now. Loaders and Actions no longer exist, which is why I was wondering previously why their versions were stuck at 0.0.1-beta.204. It is now recommended to use TanStack Query instead.

[tannerlinsley]

The router still has very basic loader functionality built in. It should handle many use cases, but also integrate well with Query when you need it.

…

On Nov 30, 2023 at 9:57 PM -0700, 王恒 ***@***.***>, wrote: I think I understand now. Loaders and Actions no longer exist, which is why I was wondering previously why their versions were stuck at 0.0.1-beta.204. It is now recommended to use TanStack Query instead. image.png (view on web) image.png (view on web) — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

[boldurean]

I've found ideal solution for me. The Route loader ensuresQueryData, and component still fetches with useQuery using same queryOptions, which makes possible preload/or not if data exists on hover over the Link. Benefits: no changes in component while refactoring, no additional Suspense wrappers while moving from the react-router-dom :)

[TkDodo]

this is literally what the router docs suggest 😅

https://tanstack.com/router/latest/docs/framework/react/guide/external-data-loading#a-more-realistic-example-using-tanstack-query

[boldurean]

@TkDodo docs suggest to useSuspenseQuery :) i'm using loader to prefech query, and useQuery inside component :P

[TkDodo]

Why not suspenseQuery? Integrates natively with suspense boundaries from the router, and ensures data can never be undefined on type level

[boldurean]

The query takes 2-3 seconds to be processed and here is just one Suspense component at the top level. If I will use this it will trigger suspense and no other components will be rendered while loading.
We decided for smoother migration over the tanstack router just to use existing queries, and later on add inner Suspense + replace components useQuery -> useSuspenseQuery.