Merge pull request #124 from prgrms-web-devcourse-final-project/setting-react-query

[Setting] ReactQueryDevtools

Author: shlee9999

package-lock.json

@@ -20,6 +20,7 @@
     "@mui/material": "^6.1.9",
     "@mui/styled-engine-sc": "^6.1.9",
     "@tanstack/react-query": "^5.62.2",
+    "@tanstack/react-query-devtools": "^5.62.2",
     "d3": "^7.9.0",
     "ios-style-picker": "^0.0.6",
     "ol": "^10.2.1",

package.json

@@ -9,6 +9,7 @@ import { darkTheme, lightTheme } from '~/styles/theme'
 import Loader from '~components/Loader'
 import { WebSocketProvider } from '~/WebSocketContext'
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools'
 
 const queryClient = new QueryClient()
 
@@ -20,24 +21,25 @@ function App() {
   return (
     <>
       <WebSocketProvider>
-      <HelmetProvider>
-        <ThemeProvider theme={theme}>
-          <QueryClientProvider client={queryClient}>
-            <Helmet>
-              <title>DDang</title>
-              <meta name='description' content='반려견과 함께하는 즐거운 산책, DDang.' />
-            </Helmet>
-            <button onClick={toggleTheme} hidden>
-              Toggle Theme
-            </button>
-            <GlobalStyle />
-            <MobileContainer>
-              <Suspense fallback={<Loader />}>
-                <RouterProvider router={router} />
-              </Suspense>
-            </MobileContainer>
-            <PWABadge />
-           </QueryClientProvider>
+        <HelmetProvider>
+          <ThemeProvider theme={theme}>
+            <QueryClientProvider client={queryClient}>
+              <Helmet>
+                <title>DDang</title>
+                <meta name='description' content='반려견과 함께하는 즐거운 산책, DDang.' />
+              </Helmet>
+              <button onClick={toggleTheme} hidden>
+                Toggle Theme
+              </button>
+              <GlobalStyle />
+              <MobileContainer>
+                <Suspense fallback={<Loader />}>
+                  <RouterProvider router={router} />
+                </Suspense>
+              </MobileContainer>
+              <PWABadge />
+              <ReactQueryDevtools initialIsOpen={false} />
+            </QueryClientProvider>
           </ThemeProvider>
         </HelmetProvider>
       </WebSocketProvider>

src/App.tsx

@@ -77,5 +77,8 @@ export default defineConfig(({ mode }) => {
         },
       },
     },
+    define: {
+      global: 'window',
+    },
   }
 })