How to access to router context in component ?

[abdulazizkhatamov]

currently, i am using sending request to get session data 2 times, instead is it possible to get session data from router context in my navbar component without using useSession again in my case ? I have tried many ways but please let me know if there is any perfect way to handle it.

My repo: https://github.com/abdulazizkhatamov/miyabi-customer-reactjs

Here is my useSession hook for querying session data from backend:

// 🔹 Central Session type
export interface Session {
  user: User | null
  cart: Cart | null
}

// 🔹 Session query
export function useSession() {
  return useQuery<Session>({
    queryKey: ['session'],
    queryFn: async () => {
      const res = await axiosInstance.get('/auth/session')
      return res.data as Session
    },
  })
}

here is my router provider.tsx:

// tanstackRouter.provider.tsx
import { RouterProvider, createRouter } from '@tanstack/react-router'
import { routeTree } from '@/routeTree.gen'
import { getContext } from '@/app/providers/tanstackQuery.provider'
import { useSession } from '@/shared/api/auth.api'

// Single context shared across router + providers
const context = getContext()

const router = createRouter({
  routeTree,
  context: {
    ...context,
    session: undefined!,
  },
  defaultPreload: 'intent',
  scrollRestoration: true,
  defaultStructuralSharing: true,
  defaultPreloadStaleTime: 0,
})

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

export default function TanstackRouterProvider() {
  const session = useSession()

  return <RouterProvider router={router} context={{ ...context, session }} />
}

routes/__root.tsx:

import { Outlet, createRootRouteWithContext } from '@tanstack/react-router'
import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
import { TanstackDevtools } from '@tanstack/react-devtools'

import { Container } from '@mui/material'
import type { QueryClient, UseQueryResult } from '@tanstack/react-query'
import type { Session } from '@/shared/api/auth.api'
import Header from '@/shared/components/header'
import Footer from '@/shared/components/footer'

export interface MyRouterContext {
  queryClient: QueryClient
  session: UseQueryResult<Session, Error>
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: () => (
    <>
      <Header />
      <main>
        <Container maxWidth="lg">
          <Outlet />
        </Container>
      </main>
      <Footer />
      <TanstackDevtools
        config={{
          position: 'bottom-left',
        }}
        plugins={[
          {
            name: 'Tanstack Router',
            render: <TanStackRouterDevtoolsPanel />,
          },
        ]}
      />
    </>
  ),
})

navbar.tsx (this is where i want to access to session data)

export default function Navbar({ onMenuClick }: NavbarProps) {
  const { data: session } = useSession()
  const theme = useTheme()
  return <div>session.cart.items.length</div>
}