import {
HeadContent,
Outlet,
createRootRouteWithContext,
useRouteContext,
} from '@tanstack/react-router'
import { Meta, Scripts, createServerFn } from '@tanstack/react-start'
import { QueryClient } from '@tanstack/react-query'
import * as React from 'react'
import appCss from '@/styles/app.css?url'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { ConvexReactClient } from 'convex/react'
import { ConvexQueryClient } from '@convex-dev/react-query'
import { getWebRequest } from '@tanstack/react-start/server'
import { getAuth } from '@clerk/tanstack-react-start/server'
import { ClerkProvider, useAuth, } from '@clerk/tanstack-react-start'
// Get auth information for SSR using available cookies
const fetchAuth = createServerFn({ method: 'GET' }).handler(async () => {
const auth = await getAuth(getWebRequest())
const token = await auth.getToken({ template: 'convex' })
return {
userId: auth.userId,
token,
}
})
export const Route = createRootRouteWithContext<{
queryClient: QueryClient
convexClient: ConvexReactClient
convexQueryClient: ConvexQueryClient
}>()({
head: () => ({
//...meta stuff
links: [
{ rel: 'stylesheet', href: appCss },
{ rel: 'icon', href: '/favicon.ico' },
],
}),
component: RootComponent,
})
function RootComponent() {
const context = useRouteContext({ from: Route.id })
return (
<ClerkProvider>
<ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
<RootDocument>
<Outlet />
</RootDocument>
</ConvexProviderWithClerk>
</ClerkProvider>
)
}
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<head>
<HeadContent />
</head>
<body className="bg-neutral-950 text-neutral-50">
{children}
<Scripts />
</body>
</html>
)
}
import {
HeadContent,
Outlet,
createRootRouteWithContext,
useRouteContext,
} from '@tanstack/react-router'
import { Meta, Scripts, createServerFn } from '@tanstack/react-start'
import { QueryClient } from '@tanstack/react-query'
import * as React from 'react'
import appCss from '@/styles/app.css?url'
import { ConvexProviderWithClerk } from 'convex/react-clerk'
import { ConvexReactClient } from 'convex/react'
import { ConvexQueryClient } from '@convex-dev/react-query'
import { getWebRequest } from '@tanstack/react-start/server'
import { getAuth } from '@clerk/tanstack-react-start/server'
import { ClerkProvider, useAuth, } from '@clerk/tanstack-react-start'
// Get auth information for SSR using available cookies
const fetchAuth = createServerFn({ method: 'GET' }).handler(async () => {
const auth = await getAuth(getWebRequest())
const token = await auth.getToken({ template: 'convex' })
return {
userId: auth.userId,
token,
}
})
export const Route = createRootRouteWithContext<{
queryClient: QueryClient
convexClient: ConvexReactClient
convexQueryClient: ConvexQueryClient
}>()({
head: () => ({
//...meta stuff
links: [
{ rel: 'stylesheet', href: appCss },
{ rel: 'icon', href: '/favicon.ico' },
],
}),
component: RootComponent,
})
function RootComponent() {
const context = useRouteContext({ from: Route.id })
return (
<ClerkProvider>
<ConvexProviderWithClerk client={context.convexClient} useAuth={useAuth}>
<RootDocument>
<Outlet />
</RootDocument>
</ConvexProviderWithClerk>
</ClerkProvider>
)
}
function RootDocument({ children }: { children: React.ReactNode }) {
return (
<html lang="en" className="dark">
<head>
<HeadContent />
</head>
<body className="bg-neutral-950 text-neutral-50">
{children}
<Scripts />
</body>
</html>
)
}