Help with React query session management and protected routes

[chertik77]

Hello, I've got this fully working example:

__root.tsx
export const Route = createRootRouteWithContext<RouterContext>()({
  beforeLoad: async ({ context: { queryClient } }) => {
    try {
      const user = await queryClient.fetchQuery(userQueries.me())
    } catch {
      return
    }
  },
  component: RootRoute
})

dashboard.tsx
export const Route = createFileRoute('/dashboard')({
  beforeLoad: ({ context: { queryClient } }) => {
    const isAuthenticated = queryClient.getQueryData(userQueries.current())

    if (!isAuthenticated) throw redirect({ to: '/' })
  },
  component: DashboardPage
})

However, this code has a few drawbacks. I want to check if the user is authenticated only once, and then to be able to read the cached version. But root file is called before every other route is executed, so each time I navigate the page the call will fire.

Even if I change fetchQuery to ensureQueryData nothing will change, because that query is in inactive state.

I tried to move logic out of beforeLoad function, api call fires only once, becomes stale, but then my redirects after logout or to dashboard stopped working.

So my problem is that I'm doing too much requests, because of the root functionality.

Maybe I should consider other way of thinking ?