adverse-sapphire

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>,
)

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
})

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

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

3 Replies

adverse-sapphireOP•13mo ago

routes.tsx:

export const indexRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/',
    component: () => (<div><li>Index</li></div>),
},
)
export const dashboardRoute= createRoute({
    getParentRoute: () => rootRoute,
    path: '/dashboard',
    component: dashboard,
},
)
export const signinRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/signin',
    component: Signin
},
export const signupRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/signup',
    component: Signup
},

export const indexRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/',
    component: () => (<div><li>Index</li></div>),
},
)
export const dashboardRoute= createRoute({
    getParentRoute: () => rootRoute,
    path: '/dashboard',
    component: dashboard,
},
)
export const signinRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/signin',
    component: Signin
},
export const signupRoute = createRoute({
    getParentRoute: () => rootRoute,
    path: '/signup',
    component: Signup
},

Dashboard:

function Dashboard() {
  const queryClient = useQueryClient()
  useEffect(() => {
    const userData = queryClient.getQueryData(['User']);
    console.log('Cached User Data:', userData); // Should log your user data if cached
  }, [queryClient]);
  const userData = queryClient.getQueryData<UserData>(['User']);
  return <>{userData ? userData.email : 'No user data available'}<Outlet /></>;
}

function Dashboard() {
  const queryClient = useQueryClient()
  useEffect(() => {
    const userData = queryClient.getQueryData(['User']);
    console.log('Cached User Data:', userData); // Should log your user data if cached
  }, [queryClient]);
  const userData = queryClient.getQueryData<UserData>(['User']);
  return <>{userData ? userData.email : 'No user data available'}<Outlet /></>;
}

When I add Dashboard to the NavigationHeader as a link, I get returned the data When I don't have Dashboard there, I get returned 'undefined' from the data

adverse-sapphire•13mo ago

I'm not sure I understand the question here. Please throw your setup into a minimal reproduction so this can be looked at.

adverse-sapphire•13mo ago

You can start off with this stackblitz example: https://stackblitz.com/github/tanstack/router/tree/main/examples/react/quickstart-file-based?file=src/main.tsx

StackBlitz

Router Quickstart File Based Example - StackBlitz

Run official live example code for Router Quickstart File Based, created by Tanstack on StackBlitz

Gaming

Programming

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

Did you find this page helpful?