FE: Chore: Add React Query Devtool (#297)

kafbat · Apr 15, 2024 · 475caa3 · 475caa3
1 parent 3fdbfba
commit 475caa3
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 1 deletion.
diff --git a/frontend/package.json b/frontend/package.json
@@ -34,7 +34,8 @@
     "styled-components": "^5.3.1",
     "use-debounce": "^9.0.3",
     "yup": "^1.0.0",
-    "zustand": "^4.1.1"
+    "zustand": "^4.1.1",
+    "@tanstack/react-query-devtools": "4.36.1"
   },
   "scripts": {
     "start": "vite",

diff --git a/frontend/pnpm-lock.yaml b/frontend/pnpm-lock.yaml
diff --git a/frontend/src/components/App.tsx b/frontend/src/components/App.tsx
@@ -16,6 +16,7 @@ import { Toaster } from 'react-hot-toast';
 import GlobalCSS from 'components/globalCss';
 import * as S from 'components/App.styled';
 import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';
 import { ConfirmContextProvider } from './contexts/ConfirmContext';
@@ -96,6 +97,7 @@ const App: React.FC = () => {
           </Suspense>
         </ThemeProvider>
       </GlobalSettingsProvider>
+      <ReactQueryDevtools initialIsOpen={false} />
     </QueryClientProvider>
   );
 };