added react query dev tools (#11293)

Kira-Pilot · web-flow · commit 20dff2aa5d04 · 2023-12-20T10:08:51.000-05:00
diff --git a/site/package.json b/site/package.json
@@ -42,6 +42,7 @@
     "@mui/material": "5.14.0",
     "@mui/system": "5.14.0",
     "@mui/utils": "5.14.11",
+    "@tanstack/react-query-devtools": "4.35.3",
     "@vitejs/plugin-react": "4.1.0",
     "ansi-to-html": "0.7.2",
     "axios": "1.6.0",
diff --git a/site/pnpm-lock.yaml b/site/pnpm-lock.yaml
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -1,12 +1,13 @@
 import { QueryClient, QueryClientProvider } from "react-query";
-import type { FC, ReactNode } from "react";
+import { type FC, type ReactNode, useEffect, useState } from "react";
 import { HelmetProvider } from "react-helmet-async";
 import { AppRouter } from "./AppRouter";
 import { ThemeProvider } from "./contexts/ThemeProvider";
 import { AuthProvider } from "./contexts/AuthProvider/AuthProvider";
 import { ErrorBoundary } from "./components/ErrorBoundary/ErrorBoundary";
 import { GlobalSnackbar } from "./components/GlobalSnackbar/GlobalSnackbar";
 import "./theme/globalFonts";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 const defaultQueryClient = new QueryClient({
   defaultOptions: {
@@ -22,10 +23,25 @@ interface AppProvidersProps {
   queryClient?: QueryClient;
 }
 
+// extending the global window interface so we can conditionally
+// show our react query devtools
+declare global {
+  interface Window {
+    toggleDevtools: () => void;
+  }
+}
+
 export const AppProviders: FC<AppProvidersProps> = ({
   children,
   queryClient = defaultQueryClient,
 }) => {
+  // https://tanstack.com/query/v4/docs/react/devtools
+  const [showDevtools, setShowDevtools] = useState(false);
+  useEffect(() => {
+    window.toggleDevtools = () => setShowDevtools((old) => !old);
+    // eslint-disable-next-line react-hooks/exhaustive-deps -- no dependencies needed here
+  }, []);
+
   return (
     <HelmetProvider>
       <QueryClientProvider client={queryClient}>
@@ -35,6 +51,7 @@ export const AppProviders: FC<AppProvidersProps> = ({
             <GlobalSnackbar />
           </ThemeProvider>
         </AuthProvider>
+        {showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}
       </QueryClientProvider>
     </HelmetProvider>
   );
