Add react query devtools

client/package-lock.json

@@ -67,6 +67,7 @@
         "@babel/preset-react": "^7.18.6",
         "@babel/preset-typescript": "^7.21.0",
         "@babel/runtime": "^7.20.13",
+        "@tanstack/react-query-devtools": "^4.29.0",
         "@types/jest": "^29.5.0",
         "@types/node": "^18.15.10",
         "@types/react": "^18.0.30",
@@ -3273,6 +3274,22 @@
       "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
       "dev": true
     },
+    "node_modules/@tanstack/match-sorter-utils": {
+      "version": "8.8.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
+      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
+      "dev": true,
+      "dependencies": {
+        "remove-accents": "0.4.2"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/kentcdodds"
+      }
+    },
     "node_modules/@tanstack/query-core": {
       "version": "4.27.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.27.0.tgz",
@@ -3308,6 +3325,26 @@
         }
       }
     },
+    "node_modules/@tanstack/react-query-devtools": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.29.0.tgz",
+      "integrity": "sha512-bzotqin4Wa/GlPgJ2dI7eggQcbMDLIOwEClHGrkyie76DbT8vEEmEV9Kbh6kriKVSqCLpa9ZrgG/f8/Bx1zIwA==",
+      "dev": true,
+      "dependencies": {
+        "@tanstack/match-sorter-utils": "^8.7.0",
+        "superjson": "^1.10.0",
+        "use-sync-external-store": "^1.2.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/tannerlinsley"
+      },
+      "peerDependencies": {
+        "@tanstack/react-query": "4.28.0",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+        "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@types/body-parser": {
       "version": "1.19.2",
       "dev": true,
@@ -5071,6 +5108,21 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/copy-anything": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
+      "integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
+      "dev": true,
+      "dependencies": {
+        "is-what": "^4.1.8"
+      },
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/copy-to-clipboard": {
       "version": "3.3.3",
       "license": "MIT",
@@ -7853,6 +7905,18 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-what": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
+      "integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.13"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/mesqueeb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "dev": true,
@@ -11711,6 +11775,12 @@
         "unist-util-visit": "^4.0.0"
       }
     },
+    "node_modules/remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==",
+      "dev": true
+    },
     "node_modules/require-from-string": {
       "version": "2.0.2",
       "dev": true,
@@ -12494,6 +12564,18 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/superjson": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.2.tgz",
+      "integrity": "sha512-ugvUo9/WmvWOjstornQhsN/sR9mnGtWGYeTxFuqLb4AiT4QdUavjGFRALCPKWWnAiUJ4HTpytj5e0t5HoMRkXg==",
+      "dev": true,
+      "dependencies": {
+        "copy-anything": "^3.0.2"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -15743,6 +15825,15 @@
       "integrity": "sha512-XJfwUVUKDHF5ugKwIcxEgc9k8b7HbznCp6eUfWgu710hMPNIO4aw4/zB5RogDQz8nd6gyCDpU9O/m6qYEWY6yQ==",
       "dev": true
     },
+    "@tanstack/match-sorter-utils": {
+      "version": "8.8.4",
+      "resolved": "https://registry.npmjs.org/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz",
+      "integrity": "sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==",
+      "dev": true,
+      "requires": {
+        "remove-accents": "0.4.2"
+      }
+    },
     "@tanstack/query-core": {
       "version": "4.27.0",
       "resolved": "https://registry.npmjs.org/@tanstack/query-core/-/query-core-4.27.0.tgz",
@@ -15757,6 +15848,17 @@
         "use-sync-external-store": "^1.2.0"
       }
     },
+    "@tanstack/react-query-devtools": {
+      "version": "4.29.0",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-query-devtools/-/react-query-devtools-4.29.0.tgz",
+      "integrity": "sha512-bzotqin4Wa/GlPgJ2dI7eggQcbMDLIOwEClHGrkyie76DbT8vEEmEV9Kbh6kriKVSqCLpa9ZrgG/f8/Bx1zIwA==",
+      "dev": true,
+      "requires": {
+        "@tanstack/match-sorter-utils": "^8.7.0",
+        "superjson": "^1.10.0",
+        "use-sync-external-store": "^1.2.0"
+      }
+    },
     "@types/body-parser": {
       "version": "1.19.2",
       "dev": true,
@@ -17000,6 +17102,15 @@
       "version": "1.0.6",
       "dev": true
     },
+    "copy-anything": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/copy-anything/-/copy-anything-3.0.3.tgz",
+      "integrity": "sha512-fpW2W/BqEzqPp29QS+MwwfisHCQZtiduTe/m8idFo0xbti9fIZ2WVhAsCv4ggFVH3AgCkVdpoOCtQC6gBrdhjw==",
+      "dev": true,
+      "requires": {
+        "is-what": "^4.1.8"
+      }
+    },
     "copy-to-clipboard": {
       "version": "3.3.3",
       "requires": {
@@ -18775,6 +18886,12 @@
         "call-bind": "^1.0.2"
       }
     },
+    "is-what": {
+      "version": "4.1.8",
+      "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.8.tgz",
+      "integrity": "sha512-yq8gMao5upkPoGEU9LsB2P+K3Kt8Q3fQFCGyNCWOAnJAMzEXVV9drYb0TXr42TTliLLhKIBvulgAXgtLLnwzGA==",
+      "dev": true
+    },
     "is-wsl": {
       "version": "2.2.0",
       "dev": true,
@@ -20979,6 +21096,12 @@
         "unist-util-visit": "^4.0.0"
       }
     },
+    "remove-accents": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz",
+      "integrity": "sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==",
+      "dev": true
+    },
     "require-from-string": {
       "version": "2.0.2",
       "dev": true
@@ -21481,6 +21604,15 @@
         }
       }
     },
+    "superjson": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.12.2.tgz",
+      "integrity": "sha512-ugvUo9/WmvWOjstornQhsN/sR9mnGtWGYeTxFuqLb4AiT4QdUavjGFRALCPKWWnAiUJ4HTpytj5e0t5HoMRkXg==",
+      "dev": true,
+      "requires": {
+        "copy-anything": "^3.0.2"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",

client/package.json

@@ -30,6 +30,7 @@
     "@radix-ui/react-label": "^2.0.0",
     "@radix-ui/react-slider": "^1.1.1",
     "@radix-ui/react-tabs": "^1.0.3",
+    "@tanstack/react-query": "^4.28.0",
     "@types/jest": "^29.5.0",
     "@types/node": "^18.15.10",
     "@types/react": "^18.0.30",
@@ -67,23 +68,23 @@
     "tailwindcss-animate": "^1.0.5",
     "tailwindcss-radix": "^2.8.0",
     "url": "^0.11.0",
-    "uuidv4": "^6.2.13",
+    "uuidv4": "^6.2.13"
-    "@tanstack/react-query": "^4.28.0"
   },
   "devDependencies": {
-    "@types/jest": "^29.5.0",
-    "@types/node": "^18.15.10",
-    "@types/react": "^18.0.30",
-    "@types/react-dom": "^18.0.11",
     "@babel/cli": "^7.20.7",
     "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-transform-runtime": "^7.19.6",
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
-    "@babel/runtime": "^7.20.13",
-    "@vitejs/plugin-react": "^3.1.0",
     "@babel/preset-typescript": "^7.21.0",
+    "@babel/runtime": "^7.20.13",
+    "@tanstack/react-query-devtools": "^4.29.0",
+    "@types/jest": "^29.5.0",
+    "@types/node": "^18.15.10",
+    "@types/react": "^18.0.30",
+    "@types/react-dom": "^18.0.11",
+    "@vitejs/plugin-react": "^3.1.0",
     "autoprefixer": "^10.4.13",
     "babel-loader": "^9.1.2",
     "babel-plugin-root-import": "^6.6.0",

client/src/App.jsx

@@ -7,6 +7,7 @@ import store from './store';
 import { useRecoilState, useSetRecoilState } from 'recoil';
 import { ScreenshotProvider } from './utils/screenshotContext.jsx';
 import { useGetSearchEnabledQuery, useGetUserQuery, useGetEndpointsQuery, useGetPresetsQuery} from '~/data-provider';
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 const router = createBrowserRouter([
   {
@@ -82,7 +83,10 @@ const App = () => {
 
   if (user)
     return (
+      <>
         <RouterProvider router={router} />
+        <ReactQueryDevtools initialIsOpen={false} />
+      </>
     );
   else return <div className="flex h-screen"></div>;
 };