Merge pull request #18 from SOPT-36-NINEDOT/init/#16/tanstackQuery

[Init]: Tanstack Query 기본 세팅

Author: shinjigu

package.json

@@ -14,6 +14,7 @@
     "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.81.5",
     "@reduxjs/toolkit": "^2.8.2",
     "axios": "^1.10.0",
     "react": "^19.1.0",
@@ -24,6 +25,7 @@
   "devDependencies": {
     "@chromatic-com/storybook": "^4.0.1",
     "@eslint/js": "^9.29.0",
+    "@tanstack/react-query-devtools": "^5.81.5",
     "@storybook/addon-a11y": "^9.0.15",
     "@storybook/addon-docs": "^9.0.15",
     "@storybook/addon-essentials": "^8.6.14",

pnpm-lock.yaml

@@ -0,0 +1,16 @@
+import { QueryClient } from '@tanstack/react-query';
+
+export const queryClient = new QueryClient({
+  defaultOptions: {
+    queries: {
+      staleTime: 1000 * 60 * 1,
+      refetchOnWindowFocus: false,
+      refetchOnMount: true,
+      refetchOnReconnect: false,
+      retry: 2,
+    },
+    mutations: {
+      retry: 1,
+    },
+  },
+});

src/common/util/.gitkeep

@@ -2,10 +2,18 @@ import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 
 import App from './App.tsx';
+
 import './style/global.css.ts';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+
+import { queryClient } from './common/util/queryClient.ts';
 
 createRoot(document.getElementById('root')!).render(
   <StrictMode>
-    <App />
+    <QueryClientProvider client={queryClient}>
+      <App />
+      {import.meta.env.DEV && <ReactQueryDevtools initialIsOpen={false} />}
+    </QueryClientProvider>
   </StrictMode>,
 );