react-toolkits 2.27.12 → 2.27.13

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # react-toolkits
 
+## 2.27.13
+
+### Patch Changes
+
+- 1ca0426: chore: update README and configuration for react-query integration
+
 ## 2.27.12
 
 ### Patch Changes

package/README.md

@@ -19,9 +19,10 @@ pnpm add react-toolkits
 
 对等依赖（需由你的应用提供）：
 
-- react、react-dom：^18
-- antd：^5
-- react-router-dom：^6
+- react、react-dom：^19
+- antd：^6
+- react-router-dom：^7
+- @tanstack/react-query：^5
 
 样式：
 
@@ -32,6 +33,7 @@ import 'react-toolkits/style.css'
 ## 快速上手
 
 ```tsx
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
 import 'react-toolkits/style.css'
 import { createRoot } from 'react-dom/client'
 import { RouterProvider } from 'react-router-dom'
@@ -40,21 +42,40 @@ import { PermissionMode } from 'react-toolkits/constants'
 
 import router from './router'
 
+// 创建 QueryClient 实例
+const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      refetchOnWindowFocus: false,
+      retry: false,
+      staleTime: 5 * 60 * 1000,
+      gcTime: 10 * 60 * 1000,
+    },
+    mutations: {
+      retry: false,
+    },
+  },
+})
+
 const root = createRoot(document.getElementById('root') as HTMLElement)
 
 root.render(
-  <ToolkitsProvider
-    collapsible
-    gameApiV2
-    permissionMode={PermissionMode.GROUP_BASED}
-    loginPath="/sign_in"
-    mainPagePath="/"
-  >
-    <RouterProvider router={router} />
-  </ToolkitsProvider>,
+  <QueryClientProvider client={queryClient}>
+    <ToolkitsProvider
+      collapsible
+      gameApiV2
+      permissionMode={PermissionMode.GROUP_BASED}
+      loginPath="/sign_in"
+      mainPagePath="/"
+    >
+      <RouterProvider router={router} />
+    </ToolkitsProvider>
+  </QueryClientProvider>,
 )
 ```
 
+**重要提示**：`QueryClientProvider` 必须包裹 `ToolkitsProvider`，因为 `react-toolkits` 内部使用了 `@tanstack/react-query` 的 hooks（如 `useQueryClient`、`useQuery`、`useMutation`）。
+
 ### 配置项（`ToolkitsProvider`）
 
 - **loginPath**: 登录页路径（未鉴权时会跳转）