feat(query): integrate @tanstack/react-query for improved data fetching and state management

src/modules/query.ts

@@ -1,6 +1,8 @@
 import { Query, DataOpts } from '@kevisual/query';
 import { QueryLoginBrowser } from '@kevisual/api/query-login'
 import { useContextKey } from '@kevisual/context';
+import { QueryClient } from '@tanstack/react-query';
+
 export const query = useContextKey('query', new Query({
   url: '/api/router',
 }));
@@ -11,4 +13,6 @@ export const queryClient = useContextKey('queryClient', new Query({
 
 export const queryLogin = useContextKey('queryLogin', new QueryLoginBrowser({
   query: query
-}));
+}));
+
+export const stackQueryClient = useContextKey('stackQueryClient', new QueryClient());

src/routes/__root.tsx

@@ -6,6 +6,8 @@ import { AuthProvider } from '@/pages/auth'
 import { TooltipProvider } from '@/components/ui/tooltip'
 import { useLayoutStore } from '@/pages/auth/store';
 import { useShallow } from 'zustand/shallow';
+import { stackQueryClient } from '@/modules/query'
+import { QueryClientProvider } from '@tanstack/react-query'
 import clsx from 'clsx';
 export const Route = createRootRoute({
   component: RootComponent,
@@ -17,20 +19,22 @@ function RootComponent() {
     showBaseHeader: state.showBaseHeader,
   })));
   return (
-    <div className='h-full overflow-hidden'>
-      <LayoutMain />
-      <AuthProvider mustLogin={true}>
-        <TooltipProvider>
-          <main className={clsx('overflow-auto scrollbar', {
-            'h-[calc(100%-3rem)]': store.showBaseHeader,
-            'h-full': !store.showBaseHeader,
-          })}>
-            <Outlet />
-          </main>
-        </TooltipProvider>
-      </AuthProvider>
-      <TanStackRouterDevtools position="bottom-right" />
-      <Toaster />
-    </div>
+    <QueryClientProvider client={stackQueryClient}>
+      <div className='h-full overflow-hidden'>
+        <LayoutMain />
+        <AuthProvider mustLogin={true}>
+          <TooltipProvider>
+            <main className={clsx('overflow-auto scrollbar', {
+              'h-[calc(100%-3rem)]': store.showBaseHeader,
+              'h-full': !store.showBaseHeader,
+            })}>
+              <Outlet />
+            </main>
+          </TooltipProvider>
+        </AuthProvider>
+        <TanStackRouterDevtools position="bottom-right" />
+        <Toaster />
+      </div>
+    </QueryClientProvider>
   )
 }