feat: 集成 TanStack Query 与 Router 开发工具并重构上下文管理

- 添加 TanStack Query 上下文管理,初始化并导出查询客户端实例。
- 添加 TanStack Query 开发工具面板支持,集成 React Devtools 以提供查询调试功能。
- 导出上下文和开发工具模块以支持 TanStack Query 集成
- 添加 TanStack Router 开发工具面板支持,集成 React Devtools 以提供路由调试功能。
- 导出 tanstack-router 开发工具模块的全部功能。
- 重构路由配置以使用统一的查询上下文,移除重复的查询客户端实例化并确保服务端渲染集成正确引用上下文中的查询客户端。
- 移除旧版 devtools 组件导入并替换为通过集成模块导入的现代化 devtools 插件。
This commit is contained in:
2026-01-18 01:13:22 +08:00
parent ace80a2f95
commit e0369d3271
7 changed files with 32 additions and 16 deletions

View File

@@ -0,0 +1,8 @@
import { QueryClient } from '@tanstack/react-query'
export function getContext() {
const queryClient = new QueryClient()
return {
queryClient,
}
}

View File

@@ -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

View File

@@ -0,0 +1,2 @@
export * from './context'
export * from './devtools'

View File

@@ -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

View File

@@ -0,0 +1 @@
export * from './devtools'