Tanstack Start with Clerk and Convex
My current setup you can see on screen.
All works fine except when I try to open webpage from bookmark like
Most important code parts:
All works fine except when I try to open webpage from bookmark like
/dashboard/transactions/incomes/dashboard/transactions/incomes on first render (I was logged) I'm getting error shown on image.Most important code parts:
// router.tsx
{* ... file content ... *}
const router = routerWithQueryClient(
createTanStackRouter({
routeTree,
defaultPreload: "intent",
defaultErrorComponent: DefaultCatchBoundary,
defaultNotFoundComponent: () => <NotFound />,
context: { queryClient },
Wrap: ({ children }) => (
<ClerkProvider
publishableKey={(import.meta as any).env.VITE_CLERK_PUBLISHABLE_KEY!}
>
<ConvexProviderWithClerk
client={convexQueryClient.convexClient}
useAuth={useAuth}
>
{children}
</ConvexProviderWithClerk>
</ClerkProvider>
),
scrollRestoration: true,
}),
queryClient,
);
{* ... file content ... *}
__root.tsx
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
const { userId } = await getAuth(getWebRequest()!);
return {
userId,
};
});
export const Route = createRootRouteWithContext<{
queryClient: QueryClient;
}>()({
beforeLoad: async (ctx) => {
const { userId } = await fetchClerkAuth();
return {
userId,
};
},
component: RootComponent,
});
_authed.tsx
export const Route = createFileRoute("/_authed")({
beforeLoad: ({ context }) => {
if (!context.userId) {
throw new Error("Not authenticated");
}
},
errorComponent: SOME_ERROR_COMPONENT,
});
_authed/dashboard/transactions/incomes
export const Route = createFileRoute('/_authed/dashboard/transactions/incomes')(
{
loader: ({ context: { queryClient } }) =>
queryClient.ensureQueryData({
...convexQuery(
api.transactions.getIncomeTransactionsWithCategories,
{},
),
}),
component: RouteComponent,
},
)// router.tsx
{* ... file content ... *}
const router = routerWithQueryClient(
createTanStackRouter({
routeTree,
defaultPreload: "intent",
defaultErrorComponent: DefaultCatchBoundary,
defaultNotFoundComponent: () => <NotFound />,
context: { queryClient },
Wrap: ({ children }) => (
<ClerkProvider
publishableKey={(import.meta as any).env.VITE_CLERK_PUBLISHABLE_KEY!}
>
<ConvexProviderWithClerk
client={convexQueryClient.convexClient}
useAuth={useAuth}
>
{children}
</ConvexProviderWithClerk>
</ClerkProvider>
),
scrollRestoration: true,
}),
queryClient,
);
{* ... file content ... *}
__root.tsx
const fetchClerkAuth = createServerFn({ method: "GET" }).handler(async () => {
const { userId } = await getAuth(getWebRequest()!);
return {
userId,
};
});
export const Route = createRootRouteWithContext<{
queryClient: QueryClient;
}>()({
beforeLoad: async (ctx) => {
const { userId } = await fetchClerkAuth();
return {
userId,
};
},
component: RootComponent,
});
_authed.tsx
export const Route = createFileRoute("/_authed")({
beforeLoad: ({ context }) => {
if (!context.userId) {
throw new Error("Not authenticated");
}
},
errorComponent: SOME_ERROR_COMPONENT,
});
_authed/dashboard/transactions/incomes
export const Route = createFileRoute('/_authed/dashboard/transactions/incomes')(
{
loader: ({ context: { queryClient } }) =>
queryClient.ensureQueryData({
...convexQuery(
api.transactions.getIncomeTransactionsWithCategories,
{},
),
}),
component: RouteComponent,
},
)
