chore: add @tanstack/react-query-devtools (#1002)

package.json

@@ -27,6 +27,7 @@
  "@neodrag/react": "^2.0.3",
  "@orval/core": "^6.16.0",
  "@tanstack/react-query": "^4.29.14",
+ "@tanstack/react-query-devtools": "^4.29.18",
  "@types/deep-equal": "^1.0.1",
  "@zxch3n/tidy": "github:hackworthltd/tidy#e07fdef2ae7bf593701817113dd47b4cd56c7a97",
  "axios": "^1.4.0",

src/App.tsx

@@ -1,6 +1,7 @@
-import { useEffect } from "react";
+import { Suspense, lazy, useEffect, useState } from "react";
 import { BrowserRouter, Routes, Route, Navigate } from "react-router-dom";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 import { CookiesProvider, useCookies } from "react-cookie";
 import { CookieSetOptions } from "universal-cookie";
 import { v4 as uuidv4 } from "uuid";
@@ -9,6 +10,14 @@ import "@/index.css";
 
 import { ChooseSession, Edit, NoMatch } from "@/components";
 
+const ReactQueryDevtoolsProduction = lazy(() =>
+ import("@tanstack/react-query-devtools/build/lib/index.prod.js").then(
+ (d) => ({
+ default: d.ReactQueryDevtools,
+ })
+ )
+);
+
 const queryClient = new QueryClient();
 
 const idCookieOptions = (path: string): CookieSetOptions => {
@@ -24,6 +33,7 @@ const idCookieOptions = (path: string): CookieSetOptions => {
 
 const App = (): JSX.Element => {
  const [cookies, setCookie] = useCookies(["id"]);
+ const [showDevtools, setShowDevtools] = useState(false);
 
  useEffect(() => {
  if (!cookies.id) {
@@ -35,6 +45,12 @@ const App = (): JSX.Element => {
  }
  }, [cookies, setCookie]);
 
+ useEffect(() => {
+ // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+ // @ts-ignore
+ window.toggleDevtools = () => setShowDevtools((old) => !old);
+ }, []);
+
  return (
  <CookiesProvider>
  <BrowserRouter>
@@ -47,6 +63,12 @@ const App = (): JSX.Element => {
  </Route>
  <Route path="*" element={<NoMatch />} />
  </Routes>
+ <ReactQueryDevtools initialIsOpen position="top-left" />
+ {showDevtools && (
+ <Suspense fallback={null}>
+ <ReactQueryDevtoolsProduction position="top-left" />
+ </Suspense>
+ )}
  </QueryClientProvider>
  </BrowserRouter>
  </CookiesProvider>