Use react query

theopensystemslab · Nov 25, 2024 · 08e62da · 08e62da
1 parent 1c07974
commit 08e62da
Show file tree

Hide file tree

Showing 6 changed files with 232 additions and 86 deletions.
diff --git a/editor.planx.uk/package.json b/editor.planx.uk/package.json
@@ -16,6 +16,7 @@
     "@mui/utils": "^5.15.11",
     "@opensystemslab/map": "1.0.0-alpha.4",
     "@opensystemslab/planx-core": "git+https://github.com/theopensystemslab/planx-core#ccf9ac3",
+    "@tanstack/react-query": "^5.61.3",
     "@tiptap/core": "^2.4.0",
     "@tiptap/extension-bold": "^2.0.3",
     "@tiptap/extension-bubble-menu": "^2.1.13",
@@ -117,6 +118,7 @@
     "@storybook/react-vite": "^8.3.1",
     "@storybook/test": "^8.3.1",
     "@storybook/theming": "^8.3.1",
+    "@tanstack/eslint-plugin-query": "^5.61.3",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^14.2.1",
     "@testing-library/user-event": "^14.4.3",

diff --git a/editor.planx.uk/pnpm-lock.yaml b/editor.planx.uk/pnpm-lock.yaml
diff --git a/editor.planx.uk/src/index.tsx b/editor.planx.uk/src/index.tsx
@@ -6,6 +6,7 @@ import { ApolloProvider } from "@apollo/client";
 import CssBaseline from "@mui/material/CssBaseline";
 import { StyledEngineProvider, ThemeProvider } from "@mui/material/styles";
 import { MyMap } from "@opensystemslab/map";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { ToastContextProvider } from "contexts/ToastContext";
 import { getCookie, setCookie } from "lib/cookie";
 import ErrorPage from "pages/ErrorPage";
@@ -17,11 +18,12 @@ import HelmetProvider from "react-navi-helmet-async";
 import { ToastContainer } from "react-toastify";
 
 // init airbrake before everything else
-import * as airbrake from "./airbrake";
 import { client } from "./lib/graphql";
 import navigation from "./lib/navigation";
 import { defaultTheme } from "./theme";
 
+const queryClient = new QueryClient();
+
 if (import.meta.env.VITE_APP_ENV !== "production") {
   console.log(`ENV: ${import.meta.env.VITE_APP_ENV}`);
 }
@@ -47,7 +49,7 @@ const hasJWT = (): boolean | void => {
 
   // If JWT not set via cookie, check search params
   const jwtSearchParams = new URLSearchParams(window.location.search).get(
-    "jwt",
+    "jwt"
   );
   if (!jwtSearchParams) return false;
 
@@ -95,20 +97,22 @@ const Layout: React.FC<{
 
 root.render(
   <ToastContextProvider>
-    <ApolloProvider client={client}>
-      <AnalyticsProvider>
-        <Router context={{ currentUser: hasJWT() }} navigation={navigation}>
-          <HelmetProvider>
-            <Layout>
-              <CssBaseline />
-              <Suspense fallback={null}>
-                <View />
-              </Suspense>
-            </Layout>
-          </HelmetProvider>
-        </Router>
-      </AnalyticsProvider>
-    </ApolloProvider>
-    <ToastContainer icon={false} theme="colored" />
-  </ToastContextProvider>,
+    <QueryClientProvider client={queryClient}>
+      <ApolloProvider client={client}>
+        <AnalyticsProvider>
+          <Router context={{ currentUser: hasJWT() }} navigation={navigation}>
+            <HelmetProvider>
+              <Layout>
+                <CssBaseline />
+                <Suspense fallback={null}>
+                  <View />
+                </Suspense>
+              </Layout>
+            </HelmetProvider>
+          </Router>
+        </AnalyticsProvider>
+      </ApolloProvider>
+      <ToastContainer icon={false} theme="colored" />
+    </QueryClientProvider>
+  </ToastContextProvider>
 );