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

In my

_layout

_layout

route, I do the following to fetch data. Then I access this data through

useLoaderData

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

queryClient.fetchQuery

and also be able to trigger the

pendingComponent

pendingComponent

when I manually do

Trigger Loading

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();
    }
  },

TanStack•17mo ago•

4 replies

conventional-black

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

In my

_layout

_layout

route, I do the following to fetch data. Then I access this data through

useLoaderData

useLoaderData

queryClient.fetchQuery

queryClient.fetchQuery

and also be able to trigger the

pendingComponent

pendingComponent

when I manually do

Trigger Loading

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();
    }
  },

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

Similar Threads

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

Similar Threads

Similar Threads

Similar Threads