Router context losing types infer

[igortas]

Hi,

After setting up properly the router, I'm trying to access the context values from the loader and II face issues getting proper intellisense for the context types I'm injecting, in my case queryClient.

Vscode can't detect the types and returns it as (parameter) context: {}
Happens on the latest version

     <RouterProvider
          router={router}
          context={{
            queryClient
          }}
        />

[schiller-manuel]

you have to use https://tanstack.com/router/v1/docs/framework/react/api/router/createRootRouteWithContextFunction

if it still does not work, please provide a minimal complete example

[igortas]

Hi @schiller-manuel, nothing wrong or different I'm doing

router.tsx

import { CircularProgress } from '@mui/material';
import { routeTree } from '../../routeTree.gen';
import { ErrorComponent, createRouter } from '@tanstack/react-router';

export const router = createRouter({
  routeTree,
  defaultPendingComponent: () => <CircularProgress />,
  defaultErrorComponent: ({ error }: any) => <ErrorComponent error={error} />,
  defaultPreload: 'intent',
  // Since we're using React Query, we don't want loader calls to ever be stale
  // This will ensure that the loader is always called when the route is preloaded or visited
  defaultPreloadStaleTime: 0
});

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

Provider.tsx

const queryClient = new QueryClient();

export default function QueryClientProvider() {
  return (
    <Suspense fallback={<CircularProgress />}>
      <RQProvider client={queryClient}>
        <RouterProvider
          router={router}
          context={{
            queryClient
          }}
        />
      </RQProvider>
    </Suspense>
  );
}

This is the _root.tsx

export const Route = createRootRouteWithContext()({
  component: () => <div>hello</div>,
  loader: ({ context: { queryClient } }) => { }
});

Here is the error:

[schiller-manuel]

you did not specify the generic type argument

https://tanstack.com/router/v1/docs/framework/react/api/router/createRootRouteWithContextFunction#troutercontext-generic