How to configure router with queryClient in context?
I'm interested in using the router to load/pre-load data via react-query. The example code at "How about an external data fetching library? (https://tanstack.com/router/latest/docs/framework/react/guide/router-context#how-about-an-external-data-fetching-library) is:
import {
createRootRouteWithContext,
createRouter,
} from '@tanstack/react-router'
interface MyRouterContext {
queryClient: QueryClient
}
const rootRoute = createRootRouteWithContext<MyRouterContext>()({
component: App,
})
const queryClient = new QueryClient()
const router = createRouter({
routeTree: rootRoute,
context: {
queryClient,
},
})
However, the tanstack-router quickstart/installation instructions (https://tanstack.com/router/latest/docs/framework/react/installation) direct you to configure these things in different files i.e. the createRouter method should go into main.tsx while the createRouteRoute (which is analogous to createRootRouteWithContext) goes into routes/__route.tsx. And if I try to separate them naively, with the MyRouterContext interface being defined in routes/__root.tsx to go with createRootRouteWithContext, I get a warning with the definition of createRouter in main.tsx because it depends on the MyRouterContext interface defined in another file.
So, I think we need better instructions on how to actually do this. When you want to add queryClient to the router context, what do you need in main.tsx and what do you need in routes/__root.tsx? Thanks in advance for any pointers.Installation | TanStack Router React Docs
You can install TanStack Router with any NPM package manager.
`sh
Router Context | TanStack Router React Docs
TanStack Router's router context is a very powerful tool that can be used for dependency injection among many other things. Aptly named, the router context is passed through the router and down through each matching route. At each route in the hierarchy, the context can be modified or added to. Here's a few ways you might use the router context...
5 Replies
conscious-sapphire•14mo ago
in
__root.tsx, replace createRootRoute({ with createRootRouteWithContext<MyRouterContext>()({.
In your main.tsx, add the queryClient into the context when calling createRouter.
If you head down the examples in the documentation, you see this in action.
https://tanstack.com/router/latest/docs/framework/react/examples/basic-react-query-file-basedReact TanStack Router Basic React Query File Based Example | TanSta...
An example showing how to implement Basic React Query File Based in React using TanStack Router.
genetic-orangeOP•14mo ago
Many thanks, @Sean Cassiere - with a bit of experimentation, this does seem to work after all. I appreciate the help.
Although I do still see a typescript error wherever I use
createFileRoute:
TS4023: Exported variable Route has or is using name MyRouterContext from external module .../__root.tsx but cannot be named.
It seems to help if I move the definition of the MyRouterContext interface to a separate file.conscious-sapphire•14mo ago
Or just make it an export
conscious-sapphire•14mo ago
GitHub
nv-rental-clone/src/routes/__root.tsx at master · SeanCassiere/nv-r...
Navotar with Tailwind and the Tanstack. Contribute to SeanCassiere/nv-rental-clone development by creating an account on GitHub.
genetic-orangeOP•14mo ago
@Sean Cassiere - that works - many thanks again!