Tanstack Router + React Query + Better Auth

reacttypescript

Hi guys, anyone using tanstack router with better-auth?
I have a question, which one you prefer for dasboard app?
1. prefer using useSession on every component that require user data
or
2. prefer using getSession and wrap it with react query in root beforeLoad then put it on root context so i can access it on every component? then when i need to update user/session i invalidate the query

on `root`

export const Route = createRootRoute({
  beforeLoad: async () => {
    const authData = await queryClient.ensureQueryData({
      queryKey: ["auth", "session"] as const,
      queryFn: async () => await authClient.getSession(),
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
    });
    return {
      authData: authData.data,
    };
  },
  component: RootComponent,
});

export const Route = createRootRoute({
  beforeLoad: async () => {
    const authData = await queryClient.ensureQueryData({
      queryKey: ["auth", "session"] as const,
      queryFn: async () => await authClient.getSession(),
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
    });
    return {
      authData: authData.data,
    };
  },
  component: RootComponent,
});

on login action / any related with changing user/session data i call refetchSessionQuery()

await authClient.signIn.email(value, {
    onSuccess: async () => {
        await refetchSessionQuery();
        await router.invalidate();
    }
})

await authClient.signIn.email(value, {
    onSuccess: async () => {
        await refetchSessionQuery();
        await router.invalidate();
    }
})

refetchSessionQuery function

export async function refetchSessionQuery() {
  await queryClient.invalidateQueries({ queryKey: SESSION_QUERY_KEY });
  return queryClient.refetchQueries({ queryKey: SESSION_QUERY_KEY });
}

export async function refetchSessionQuery() {
  await queryClient.invalidateQueries({ queryKey: SESSION_QUERY_KEY });
  return queryClient.refetchQueries({ queryKey: SESSION_QUERY_KEY });
}

then on every page i just use it like this

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: RouteComponent,
});
function RouteComponent() {
  const authData = Route.useLoaderData();
  return (
    <div>
      <p>User: {JSON.stringify(authData)}</p>
    </div>
  );
}

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: RouteComponent,
});
function RouteComponent() {
  const authData = Route.useLoaderData();
  return (
    <div>
      <p>User: {JSON.stringify(authData)}</p>
    </div>
  );
}

TanStack•4mo ago•

9 replies

skinny-azure

Tanstack Router + React Query + Better Auth

reacttypescript

export const Route = createRootRoute({
  beforeLoad: async () => {
    const authData = await queryClient.ensureQueryData({
      queryKey: ["auth", "session"] as const,
      queryFn: async () => await authClient.getSession(),
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
    });
    return {
      authData: authData.data,
    };
  },
  component: RootComponent,
});

export const Route = createRootRoute({
  beforeLoad: async () => {
    const authData = await queryClient.ensureQueryData({
      queryKey: ["auth", "session"] as const,
      queryFn: async () => await authClient.getSession(),
      staleTime: 5 * 60 * 1000,
      gcTime: 10 * 60 * 1000,
    });
    return {
      authData: authData.data,
    };
  },
  component: RootComponent,
});

on login action / any related with changing user/session data i call refetchSessionQuery()

await authClient.signIn.email(value, {
    onSuccess: async () => {
        await refetchSessionQuery();
        await router.invalidate();
    }
})

await authClient.signIn.email(value, {
    onSuccess: async () => {
        await refetchSessionQuery();
        await router.invalidate();
    }
})

refetchSessionQuery function

export async function refetchSessionQuery() {
  await queryClient.invalidateQueries({ queryKey: SESSION_QUERY_KEY });
  return queryClient.refetchQueries({ queryKey: SESSION_QUERY_KEY });
}

export async function refetchSessionQuery() {
  await queryClient.invalidateQueries({ queryKey: SESSION_QUERY_KEY });
  return queryClient.refetchQueries({ queryKey: SESSION_QUERY_KEY });
}

then on every page i just use it like this

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: RouteComponent,
});
function RouteComponent() {
  const authData = Route.useLoaderData();
  return (
    <div>
      <p>User: {JSON.stringify(authData)}</p>
    </div>
  );
}

export const Route = createFileRoute("/_authenticated/dashboard")({
  component: RouteComponent,
});
function RouteComponent() {
  const authData = Route.useLoaderData();
  return (
    <div>
      <p>User: {JSON.stringify(authData)}</p>
    </div>
  );
}

Tanstack Router + React Query + Better Auth

Similar Threads

Tanstack Router + React Query + Better Auth

Similar Threads

Similar Threads

Similar Threads