equal-jade

queryClient in context, type not inferred

Using router and query together in the file-based setup. For some reason the declaration isn't picking up on the queryClient being in context. Anybody have any clues as to why? main.tsx

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

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

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

// Register the router instance for type safety
declare module "@tanstack/react-router" {
  interface Register {
    router: typeof router;
  }
}

admin/index.tsx (see photo)

12 Replies

eastern-cyan•2y ago

how do you create your root node? must be using createRootRouteWithContext

eastern-cyan•2y ago

https://tanstack.com/router/v1/docs/framework/react/api/router/rootRouteWithContextFunction

rootRouteWithContext function | TanStack Router Docs

⚠️ Deprecated The rootRouteWithContext class is deprecated and will be removed in the next major version of TanStack Router. Please use the createRootRouteWithContext function instead.

equal-jadeOP•2y ago

I don't think that's the way to do it anymore (hence the Deprecated warning). Also because if you look at the docs example it uses createRouter and the types still work correctly - https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-based

React Router Basic React Query File Based Example | TanStack Router...

An example showing how to implement Basic React Query File Based in React Router

eastern-cyan•2y ago

it is the way to do it createRootRouteWithContext

eastern-cyan•2y ago

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

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

equal-jadeOP•2y ago

Got it! Sorry, I was looking in main.tsx and then in my individual route. Missed this in __root Thank you!

distinguished-blush•2y ago

I am also getting this issue 😭

import { type User } from "@/hooks/generated-graphql-hooks.js";
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";

interface RouterContext {
  user?: User;
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: Outlet
});

import { type User } from "@/hooks/generated-graphql-hooks.js";
import { createRootRouteWithContext, Outlet } from "@tanstack/react-router";

interface RouterContext {
  user?: User;
}

export const Route = createRootRouteWithContext<RouterContext>()({
  component: Outlet
});

I am definitely using the right create route function I believe. Do I need to do any type augmentation, or is it meant to just work magically using this generic? 🤔

distinguished-blush•2y ago

I am using filesystem based routing with the vite plugin

adverse-sapphire•2y ago

so do I, and so do the examples, and it works there. so please show a minimal reproduction by forking one of the examples.

distinguished-blush•2y ago

Ok cheers Thanks tkdodo, I think I was able to find out what is going wrong. I am using true esmodules for my app, and it seems that full type inference only works when I set my "module" in my tsconfig to commonjs. The moment I set it to commonjs, I get types throughout my whole app, even for the <Link /> component which was also not working before for me! The module system that does not work is NodeNext. I haven't tried any other option in my tsconfig. This is reproducible in the examples. I'll have a look online and see if this is documented anywhere, else, I will spin up a new thread. I found a solution. I didn't really find the answer online, however, it is something I stumbled across when creating a minimally reproducible example. 1. Set allowImportingTsExtensions to true in the tsconfig 2. Set addExtensions to true in the vite plugin It was the missing file extensions in the code generation that was tripping it up. With commonjs, file extensions are not enforced so it worked fine. But with true esm you must include file extensions for the type inference to work to 100%. Also you don't necessarily need to set the allowImportingTsExtensions to true, it's a consistency aid. The vite plugin will use .tsx and the whole app will use .js. It's optional considering the generated output includes a tsignore. Also answer to my initial question is yes, it does magically work with the generic 🤣 I procrastinated solving this issue and man you guys did a great job, it's already caught some issues in my app now I am getting types coming through properly!!

Gaming

Programming

queryClient in context, type not inferred

Did you find this page helpful?