router.tsx•1.55 kB
import { createRouter } from '@tanstack/react-router'
import { routeTree } from './routeTree.gen'
import { ConvexQueryClient } from '@convex-dev/react-query'
import { QueryClient } from '@tanstack/react-query'
import { routerWithQueryClient } from '@tanstack/react-router-with-query'
import { ConvexProvider, ConvexReactClient } from 'convex/react'
import { DefaultCatchBoundary } from './components/DefaultCatchBoundary'
import { NotFound } from './components/NotFound'
export function getRouter() {
const CONVEX_URL = (import.meta as any).env.VITE_CONVEX_URL!
if (!CONVEX_URL) {
throw new Error('missing VITE_CONVEX_URL envar')
}
const convex = new ConvexReactClient(CONVEX_URL, {
unsavedChangesWarning: false,
})
const convexQueryClient = new ConvexQueryClient(convex)
const queryClient: QueryClient = new QueryClient({
defaultOptions: {
queries: {
queryKeyHashFn: convexQueryClient.hashFn(),
queryFn: convexQueryClient.queryFn(),
},
},
})
convexQueryClient.connect(queryClient)
const router = routerWithQueryClient(
createRouter({
routeTree,
defaultPreload: 'intent',
scrollRestoration: true,
defaultErrorComponent: DefaultCatchBoundary,
defaultNotFoundComponent: () => <NotFound />,
context: { queryClient },
Wrap: ({ children }) => {
return (
<ConvexProvider client={convexQueryClient.convexClient}>
{children}
</ConvexProvider>
)
},
}),
queryClient,
)
return router
}