Help with loader context type safety.

[dosmond]

Hi there,

I'm trying to follow the Kitchen Sink with React Query File Based example and I'm unsure if I'm doing something wrong.

I start by setting up the query client and the router, including the queryClient in the router context and setting the defaultPreloadStaleTime to 0 because I'm using react query for the caching

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      refetchOnWindowFocus: false,
      retry: false,
    },
  },
});

const router = createRouter({
  routeTree,
  defaultPreload: "intent",
  context: { queryClient },
  defaultPreloadStaleTime: 0,
});

declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

When trying to access the context in the loader I get the following typescript error

In order to fix this error I need to explicitly define the type of the context in the loader fn like this

loader: (opts) =>
    (opts.context as { queryClient: QueryClient }).queryClient.ensureQueryData(
      categoryQueryOptions
    ),

Is this expected?

[thomasballinger]

@dosmond did you perhaps forget this bit, https://github.com/TanStack/router/blob/main/examples/react/kitchen-sink-react-query-file-based/src/routes/__root.tsx#L5, using createRootRouterWithContext?

[thomasballinger]

router/examples/react/kitchen-sink-react-query-file-based/src/routes/__root.tsx

Lines 19 to 24 in 1a55b97

	export const Route = createRootRouteWithContext<{
	auth: Auth
	queryClient: QueryClient
	}>()({
	component: RootComponent,
	})

[dosmond]

Yes that was it! Thank you so much!