From e0369d3271826f1cf08186177292431cf9ca9ba1 Mon Sep 17 00:00:00 2001
From: imbytecat <imbytecat@gmail.com>
Date: Sun, 18 Jan 2026 01:13:22 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9B=86=E6=88=90=20TanStack=20Query?=
 =?UTF-8?q?=20=E4=B8=8E=20Router=20=E5=BC=80=E5=8F=91=E5=B7=A5=E5=85=B7?=
 =?UTF-8?q?=E5=B9=B6=E9=87=8D=E6=9E=84=E4=B8=8A=E4=B8=8B=E6=96=87=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加 TanStack Query 上下文管理，初始化并导出查询客户端实例。
- 添加 TanStack Query 开发工具面板支持，集成 React Devtools 以提供查询调试功能。
- 导出上下文和开发工具模块以支持 TanStack Query 集成
- 添加 TanStack Router 开发工具面板支持，集成 React Devtools 以提供路由调试功能。
- 导出 tanstack-router 开发工具模块的全部功能。
- 重构路由配置以使用统一的查询上下文，移除重复的查询客户端实例化并确保服务端渲染集成正确引用上下文中的查询客户端。
- 移除旧版 devtools 组件导入并替换为通过集成模块导入的现代化 devtools 插件。
---
 src/integrations/tanstack-query/context.tsx   |  8 ++++++++
 src/integrations/tanstack-query/devtools.tsx  |  7 +++++++
 src/integrations/tanstack-query/index.ts      |  2 ++
 src/integrations/tanstack-router/devtools.tsx |  7 +++++++
 src/integrations/tanstack-router/index.ts     |  1 +
 src/router.tsx                                |  8 ++++----
 src/routes/__root.tsx                         | 15 +++------------
 7 files changed, 32 insertions(+), 16 deletions(-)
 create mode 100644 src/integrations/tanstack-query/context.tsx
 create mode 100644 src/integrations/tanstack-query/devtools.tsx
 create mode 100644 src/integrations/tanstack-query/index.ts
 create mode 100644 src/integrations/tanstack-router/devtools.tsx
 create mode 100644 src/integrations/tanstack-router/index.ts

diff --git a/src/integrations/tanstack-query/context.tsx b/src/integrations/tanstack-query/context.tsx
new file mode 100644
index 0000000..f9eb8fe
--- /dev/null
+++ b/src/integrations/tanstack-query/context.tsx
@@ -0,0 +1,8 @@
+import { QueryClient } from '@tanstack/react-query'
+
+export function getContext() {
+  const queryClient = new QueryClient()
+  return {
+    queryClient,
+  }
+}
diff --git a/src/integrations/tanstack-query/devtools.tsx b/src/integrations/tanstack-query/devtools.tsx
new file mode 100644
index 0000000..a377fe0
--- /dev/null
+++ b/src/integrations/tanstack-query/devtools.tsx
@@ -0,0 +1,7 @@
+import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
+import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
+
+export const devtools = {
+  name: 'TanStack Query',
+  render: <ReactQueryDevtoolsPanel />,
+} satisfies TanStackDevtoolsReactPlugin
diff --git a/src/integrations/tanstack-query/index.ts b/src/integrations/tanstack-query/index.ts
new file mode 100644
index 0000000..7dcb09e
--- /dev/null
+++ b/src/integrations/tanstack-query/index.ts
@@ -0,0 +1,2 @@
+export * from './context'
+export * from './devtools'
diff --git a/src/integrations/tanstack-router/devtools.tsx b/src/integrations/tanstack-router/devtools.tsx
new file mode 100644
index 0000000..47d8af5
--- /dev/null
+++ b/src/integrations/tanstack-router/devtools.tsx
@@ -0,0 +1,7 @@
+import type { TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools'
+import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
+
+export const devtools = {
+  name: 'TanStack Router',
+  render: <TanStackRouterDevtoolsPanel />,
+} satisfies TanStackDevtoolsReactPlugin
diff --git a/src/integrations/tanstack-router/index.ts b/src/integrations/tanstack-router/index.ts
new file mode 100644
index 0000000..39356ff
--- /dev/null
+++ b/src/integrations/tanstack-router/index.ts
@@ -0,0 +1 @@
+export * from './devtools'
diff --git a/src/router.tsx b/src/router.tsx
index eb5a6f4..85f04ea 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -1,15 +1,15 @@
-import { QueryClient } from '@tanstack/react-query'
 import { createRouter } from '@tanstack/react-router'
 import { setupRouterSsrQueryIntegration } from '@tanstack/react-router-ssr-query'
+import { getContext as getQueryContext } from './integrations/tanstack-query'
 import { routeTree } from './routeTree.gen'
 
 export const getRouter = () => {
-  const queryClient = new QueryClient()
+  const queryContext = getQueryContext()
 
   const router = createRouter({
     routeTree,
     context: {
-      queryClient,
+      ...queryContext,
     },
 
     scrollRestoration: true,
@@ -18,7 +18,7 @@ export const getRouter = () => {
 
   setupRouterSsrQueryIntegration({
     router,
-    queryClient,
+    queryClient: queryContext.queryClient,
   })
 
   return router
diff --git a/src/routes/__root.tsx b/src/routes/__root.tsx
index 5fed3f6..f3b1d0c 100644
--- a/src/routes/__root.tsx
+++ b/src/routes/__root.tsx
@@ -1,8 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
-import { ReactQueryDevtoolsPanel } from '@tanstack/react-query-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
-import { TanStackRouterDevtoolsPanel } from '@tanstack/react-router-devtools'
 import type { ReactNode } from 'react'
+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({
@@ -43,16 +43,7 @@ function RootDocument({ children }: Readonly<{ children: ReactNode }>) {
           config={{
             position: 'bottom-right',
           }}
-          plugins={[
-            {
-              name: 'TanStack Router',
-              render: <TanStackRouterDevtoolsPanel />,
-            },
-            {
-              name: 'TanStack Query',
-              render: <ReactQueryDevtoolsPanel />,
-            },
-          ]}
+          plugins={[routerDevtools, queryDevtools]}
         />
         <Scripts />
       </body>