Add ReactQuery (#374)

Adds ReactQuery to handle async state, this PR only adds the dependency and wires up the provider it is currently unused
CDCgov · Nov 7, 2024 · 74b994b · 74b994b
1 parent 2d4c6c7
commit 74b994b
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 31 deletions.
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -15,6 +15,7 @@
     "e2e:ui": "npx playwright test --ui"
   },
   "dependencies": {
+    "@tanstack/react-query": "^5.59.20",
     "@trussworks/react-uswds": "^9.0.0",
     "@types/hex-rgb": "^3.0.0",
     "@uswds/uswds": "^3.8.1",

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -5,6 +5,7 @@ import {useLocation} from "react-router-dom";
 import {AppHeader} from "./components/AppHeader/AppHeader.tsx";
 
 import {TemplatesIndex} from "./components/TemplatesIndex/TemplatesIndex.tsx";
+import {QueryClient, QueryClientProvider} from "@tanstack/react-query";
 function App() {
     const {pathname} = useLocation()
     const navLinks = [
@@ -13,8 +14,11 @@ function App() {
         {text: "Dashboard", url: "/dashboard"}
     ]
 
+    const queryClient = new QueryClient();
+
     return (
         <>
+            <QueryClientProvider client={queryClient}>
             <div className='display-flex flex-column width-full height-full'>
                 <AppHeader jurisdiction={`Demo STLT`}/>
                 <div className="display-flex flex-row height-full">
@@ -41,7 +45,7 @@ function App() {
                 </div>
 
             </div>
-
+            </QueryClientProvider>
         </>
     )
 }