chore: setup tanstack-query and devtools

HassanBahati · Nov 3, 2024 · f0cb9e7 · f0cb9e7
1 parent 0d538ae
commit f0cb9e7
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 8 deletions.
diff --git a/react/package.json b/react/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "@tanstack/react-query": "^5.59.8",
+    "@tanstack/react-query-devtools": "^5.59.17",
     "firebase": "^10.14.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

diff --git a/react/pnpm-lock.yaml b/react/pnpm-lock.yaml
diff --git a/react/src/main.tsx b/react/src/main.tsx
@@ -1,10 +1,17 @@
-import { StrictMode } from 'react'
-import { createRoot } from 'react-dom/client'
-import App from './App.tsx'
-import './index.css'
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import App from "./App.tsx";
+import "./index.css";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
-createRoot(document.getElementById('root')!).render(
+const queryClient = new QueryClient();
+
+createRoot(document.getElementById("root")!).render(
   <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <QueryClientProvider client={queryClient}>
+      <App />
+      <ReactQueryDevtools />
+    </QueryClientProvider>
+  </StrictMode>
+);