feat: add react-query

Author: geonhwiii

package.json

@@ -12,6 +12,8 @@
     "coverage": "vitest run --coverage"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.85.2",
+    "@tanstack/react-query-devtools": "^5.85.2",
     "react": "^19.1.1",
     "react-dom": "^19.1.1",
     "react-router": "^7.8.0"

pnpm-lock.yaml

@@ -1,20 +1,21 @@
-import { BrowserRouter as Router } from 'react-router-dom';
+import { RouterProvider } from 'react-router-dom';
 import { DialogPortal } from '@/shared/utils';
-import { AppRoutes } from './routes';
+import { router } from './routes';
+import { ReactQueryProvider } from './providers';
 import { Header } from '@/widgets/header';
 import { Footer } from '@/widgets/footer';
 
 export function App() {
   return (
-    <Router>
+    <ReactQueryProvider>
       <div className='flex flex-col min-h-screen'>
         <Header />
         <main className='flex-grow container mx-auto px-4 py-8'>
-          <AppRoutes />
+          <RouterProvider router={router} />
         </main>
         <Footer />
       </div>
       <DialogPortal />
-    </Router>
+    </ReactQueryProvider>
   );
 }

src/apps/app/app.tsx

@@ -0,0 +1 @@
+export * from './react-query';

src/apps/app/providers/index.ts

@@ -0,0 +1,24 @@
+import { useState, type PropsWithChildren } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+export function ReactQueryProvider({ children }: PropsWithChildren) {
+  const [queryClient] = useState(
+    () =>
+      new QueryClient({
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+            retry: 1,
+          },
+        },
+      }),
+  );
+
+  return (
+    <QueryClientProvider client={queryClient}>
+      {children}
+      <ReactQueryDevtools initialIsOpen={false} buttonPosition='bottom-right' />
+    </QueryClientProvider>
+  );
+}

src/apps/app/providers/react-query.tsx

@@ -1,10 +1,9 @@
-import { Routes, Route } from 'react-router-dom';
+import { createBrowserRouter } from 'react-router-dom';
 import { PostsManagerPage } from '@/pages/home';
 
-export function AppRoutes() {
-  return (
-    <Routes>
-      <Route path='/' element={<PostsManagerPage />} />
-    </Routes>
-  );
-}
+export const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <PostsManagerPage />,
+  },
+]);