From effb7f16c741c119840871b52321cb0859bf7749 Mon Sep 17 00:00:00 2001
From: imbytecat <imbytecat@gmail.com>
Date: Sun, 18 Jan 2026 04:04:52 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=BC=BA=E8=B7=AF=E7=94=B1?=
 =?UTF-8?q?=E7=B1=BB=E5=9E=8B=E5=AE=89=E5=85=A8=E4=B8=8E=E6=95=B0=E6=8D=AE?=
 =?UTF-8?q?=E9=A2=84=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 为路由器上下文添加类型约束以确保类型安全
- 在根路由中添加查询客户端上下文类型并使用带上下文的根路由创建函数
- 启用加载器以预先获取待办事项列表数据
---
 src/router.tsx        |  3 ++-
 src/routes/__root.tsx | 13 +++++++++++--
 src/routes/todos.tsx  |  6 +++---
 3 files changed, 16 insertions(+), 6 deletions(-)

diff --git a/src/router.tsx b/src/router.tsx
index 85f04ea..08b76d7 100644
--- a/src/router.tsx
+++ b/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,
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index c652d53..056109b 100644
--- a/src/routes/__root.tsx
+++ b/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: [
       {
diff --git a/src/routes/todos.tsx b/src/routes/todos.tsx
index 8e3882f..9b88e46 100644
--- a/src/routes/todos.tsx
+++ b/src/routes/todos.tsx
@@ -6,9 +6,9 @@ import { orpc } from '@/orpc'
 
 export const Route = createFileRoute('/todos')({
   component: Todos,
-  // loader: async ({ context }) => {
-  //   await context.queryClient.prefetchQuery(orpc.todo.list.queryOptions())
-  // },
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(orpc.todo.list.queryOptions())
+  },
 })
 
 function Todos() {