T
TanStack•14mo ago
other-emerald

Authenticated routes with tanstack Query requires window reload

I implemented a authenticated routes with Tanstack router. Information about user coming from Tanstack Query. Like this: 
const Component = () => {
  const { user } = Route.useRouteContext();

  if (!user) {
    return <AuthComponent />;
  }

  return <Outlet />;
};

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    const queryClient = context.queryClient;
    try {
      const data = await queryClient.fetchQuery(getUserQueryOptions);
      return data;
    } catch (error) {
      return { user: null };
    }
  },
  component: Component,
});
const Component = () => {
  const { user } = Route.useRouteContext();

  if (!user) {
    return <AuthComponent />;
  }

  return <Outlet />;
};

export const Route = createFileRoute("/_authenticated")({
  beforeLoad: async ({ context }) => {
    const queryClient = context.queryClient;
    try {
      const data = await queryClient.fetchQuery(getUserQueryOptions);
      return data;
    } catch (error) {
      return { user: null };
    }
  },
  component: Component,
});
in RootRoute: 
export interface MyRouterContext {
  queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: Root,
});
export interface MyRouterContext {
  queryClient: QueryClient;
}

export const Route = createRootRouteWithContext<MyRouterContext>()({
  component: Root,
});
So on login or logout, this code in authenticated component isn't triggered, even on queryClient.refetchQueries({ queryKey: ["user-profile"] }); only window.location.reload() works. But it's a SPA and reloading flickering isn't great looking. How do I make the code from authenticated work without page reload ? What I've missed ?
0 Replies
No replies yetBe the first to reply to this messageJoin

Did you find this page helpful?