Tanstack router loader vs. tanstack query
I am trying to data fetch in tanstack router. when i fetch with router loader with queryClient.ensureQueryData(jobsQueryOptions()) it works but when i filter via input it reload and i lose focus of input again i have to focus to type anther word, BUT when i do same with just tanstack query directly inside component it doesn't have that problem.
3 Replies
optimistic-gold•4mo ago
you need to read the search params in the loader too (with
loaderDeps)
the component needs to use the same data that you fetch in the loadermetropolitan-bronzeOP•4mo ago
Thanks a lot @TkDodo 🔮 . It works.
export const Route = createFileRoute("/_authed/employer/dashboard")({
loader: ({ context: { queryClient } }) => {
return queryClient.ensureQueryData(employerDashboardQueryOptions());
},
component: RouteComponent,
});
function RouteComponent() {
const { data, isLoading, isError } = useSuspenseQuery(
employerDashboardQueryOptions()
);
- if i do this way do i need handle loading state?
- should i handle error inside component or inside createFileRoute?
optimistic-gold•4mo ago
Suspense handles both loading and error