TanStackT
TanStack•17mo ago•
4 replies
awake-maroon

How do I pass queryClient throughout my app with tanstack router/query

I want to pass the queryClient object to all pages in app, but I am unable to access it from the Dashboard. When I include the link to my Dashboard in the NavgationHeader, I am able to access the queryClient object, but I don't want to have the Dashboard in that file.,
main.tsx:
const routeTree = rootRoute.addChildren([indexRoute, signupRoute, signinRoute, dashboardRoute])

createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <QueryClientProvider client={queryClient}>
      <ReactQueryDevtools />
      <RouterProvider router={router} />

      <Index />
    </QueryClientProvider>

  </StrictMode>,
)


__root.tsx:
import { createRootRouteWithContext } from '@tanstack/react-router'
import NavigationHeader from '../screens/NavigationHeader'
import { QueryClient } from '@tanstack/react-query'
export const rootRoute = createRootRouteWithContext<{ queryClient: QueryClient }>()({
    component: NavigationHeader
})


NavigationHeader.tsx
import React, { useState } from 'react'
import { Link, Outlet } from '@tanstack/react-router'
import { TanStackRouterDevtools } from '@tanstack/router-devtools'


function NavigationHeader() {
    return (
        <div>
            <div className="p-2 flex gap-2">
                <Link to="/signup" className="[&.active]:font-bold">
                    Signup
                </Link>
                <Link to="/signin" className="[&.active]:font-bold">
                    Signin
                </Link>
                <Link to="/" className="[&.active]:font-bold">
                    Index
                </Link>
            </div>
            <hr />
            <Outlet />
            <TanStackRouterDevtools />
        </div>


    )
}


export default NavigationHeader
Was this page helpful?