feat: 增强路由类型安全与数据预加载

- 为路由器上下文添加类型约束以确保类型安全
- 在根路由中添加查询客户端上下文类型并使用带上下文的根路由创建函数
- 启用加载器以预先获取待办事项列表数据

src/router.tsx

@@ -1,6 +1,7 @@
 import { createRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
 import { getContext as getQueryContext } from './integrations/tanstack-query'
+import type { RouterContext } from './routes/__root'
 import { routeTree } from './routeTree.gen'
 
 export const getRouter = () => {
@@ -10,7 +11,7 @@ export const getRouter = () => {
     routeTree,
     context: {
       ...queryContext,
-    },
+    } satisfies RouterContext,
 
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,

src/routes/__root.tsx

@@ -1,5 +1,10 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
+import type { QueryClient } from '@tanstack/react-query'
+import {
+  createRootRouteWithContext,
+  HeadContent,
+  Scripts,
+} from '@tanstack/react-router'
 import type { ReactNode } from 'react'
 import { ErrorComponent } from '@/components/Error'
 import { NotFoundComponent } from '@/components/NotFount'
@@ -7,7 +12,11 @@ import { devtools as queryDevtools } from '@/integrations/tanstack-query'
 import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
 
-export const Route = createRootRoute({
+export interface RouterContext {
+  queryClient: QueryClient
+}
+
+export const Route = createRootRouteWithContext<RouterContext>()({
   head: () => ({
     meta: [
       {

src/routes/todos.tsx

@@ -6,9 +6,9 @@ import { orpc } from '@/orpc'
 
 export const Route = createFileRoute('/todos')({
   component: Todos,
-  // loader: async ({ context }) => {
+  loader: async ({ context }) => {
-  //   await context.queryClient.prefetchQuery(orpc.todo.list.queryOptions())
+    await context.queryClient.prefetchQuery(orpc.todo.list.queryOptions())
-  // },
+  },
 })
 
 function Todos() {