wise-white

Using queryClient.fetchQuery in the loader of a TanStack route does not activate the query.

In my _layout route, I do the following to fetch data. Then I access this data through useLoaderData hook. This all works great. However, when I check the query in the devTools, I see that it appears as inactive. I use the devTools especially to test the loading and error states, but this does not work for an inactive query. Is there a way to activate it when using queryClient.fetchQuery and also be able to trigger the pendingComponent when I manually do Trigger Loading in the devTools?

pendingComponent: LoadingSkeleton,
loader: async ({ params: { visitId } }) => {
    try {
      return await queryClient.fetchQuery({
        queryFn: () => getVisitByIdQuery(Number(visitId)),
        queryKey: ['visit', Number(visitId)],
      });
    } catch {
      throw notFound();
    }
  },

pendingComponent: LoadingSkeleton,
loader: async ({ params: { visitId } }) => {
    try {
      return await queryClient.fetchQuery({
        queryFn: () => getVisitByIdQuery(Number(visitId)),
        queryKey: ['visit', Number(visitId)],
      });
    } catch {
      throw notFound();
    }
  },

4 Replies

eastern-cyan•13mo ago

How do you use the data in your page? If it's not through a useQuery or similar hook, then the query is inactive, you just used it for a moment in the loader. I would instead use await queryClient.ensureQueryData() and then use useQuery with the same data in your component.

stormy-gold•13mo ago

You need to have queryClient in the router context as well. A loader in Tanstack or React Router is not in React-land. I'd check this example here https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based

TanStack | High Quality Open-Source Software for Web Developers

Headless, type-safe, powerful utilities for complex workflows like Data Management, Data Visualization, Charts, Tables, and UI Components.

stormy-gold•13mo ago

Is it just Router or is it a Start project?

wise-whiteOP•13mo ago

I ended up using queryClient.ensureQueryData in the loader and then useSuspenseQuery in the component.

Gaming

Programming

Using queryClient.fetchQuery in the loader of a TanStack route does not activate the query.

Did you find this page helpful?