diff --git a/web/package.json b/web/package.json
index a623e351ff..21caa76d0c 100644
--- a/web/package.json
+++ b/web/package.json
@@ -125,6 +125,8 @@
     "@maji/react-prism": "^1.0.1",
     "@monaco-editor/react": "^4.4.5",
     "@storybook/addon-storysource": "^6.5.16",
+    "@tanstack/react-query": "^4.36.1",
+    "@tanstack/react-query-devtools": "^4.36.1",
     "accounting": "^0.4.1",
     "apexcharts": "^3.24.0",
     "axios": "^1.1.2",
@@ -158,7 +160,6 @@
     "react-helmet": "^6.1.0",
     "react-icomoon": "^2.5.4",
     "react-modal": "3.11.2",
-    "react-query": "^3.39.1",
     "react-refresh": "^0.14.0",
     "react-remarkable": "^1.1.3",
     "react-router": "^5.1",
diff --git a/web/src/Root.tsx b/web/src/Root.tsx
index 2e7930a438..1260d96b8c 100644
--- a/web/src/Root.tsx
+++ b/web/src/Root.tsx
@@ -22,7 +22,7 @@ import UploadAirgapBundle from "./components/UploadAirgapBundle";
 import RestoreCompleted from "./components/RestoreCompleted";
 import Access from "./components/identity/Access";
 import SnapshotsWrapper from "./components/snapshots/SnapshotsWrapper";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { InstallWithHelm } from "@features/AddNewApp";
 import DownstreamTree from "./components/tree/KotsApplicationTree";
 import { Dashboard } from "@features/Dashboard/components/Dashboard";
diff --git a/web/src/components/hooks/useDownloadValues.test.jsx b/web/src/components/hooks/useDownloadValues.test.jsx
index 9e3902a3c0..9e6cd4467f 100644
--- a/web/src/components/hooks/useDownloadValues.test.jsx
+++ b/web/src/components/hooks/useDownloadValues.test.jsx
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { act, renderHook } from "@testing-library/react-hooks";
 import { getValues, useDownloadValues } from "./useDownloadValues";
 
diff --git a/web/src/components/hooks/useIsHelmManaged.tsx b/web/src/components/hooks/useIsHelmManaged.tsx
index 36523509d3..1b5011f6b6 100644
--- a/web/src/components/hooks/useIsHelmManaged.tsx
+++ b/web/src/components/hooks/useIsHelmManaged.tsx
@@ -1,4 +1,4 @@
-import { useQuery, UseQueryResult } from "react-query";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 
 interface IsHelmManagedResponse {
   isHelmManaged: boolean;
@@ -30,8 +30,8 @@ async function fetchIsHelmManaged({
 
 function useIsHelmManaged() {
   return useQuery({
+    queryKey: ["isHelmManaged"],
     queryFn: () => fetchIsHelmManaged(),
-    queryKey: "isHelmManaged",
     staleTime: Infinity,
     select: (response): IsHelmManaged => response.isHelmManaged || false,
   });
diff --git a/web/src/components/hooks/useSaveConfig.js b/web/src/components/hooks/useSaveConfig.js
index 9f21cd7681..9439afff46 100644
--- a/web/src/components/hooks/useSaveConfig.js
+++ b/web/src/components/hooks/useSaveConfig.js
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 const putConfig = async ({
   _fetch = fetch,
diff --git a/web/src/components/hooks/useSaveConfig.test.jsx b/web/src/components/hooks/useSaveConfig.test.jsx
index b13a8795c9..795bc06ed8 100644
--- a/web/src/components/hooks/useSaveConfig.test.jsx
+++ b/web/src/components/hooks/useSaveConfig.test.jsx
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook } from "@testing-library/react-hooks";
 import { useSaveConfig, putConfig } from "./useSaveConfig";
 
diff --git a/web/src/components/snapshots/SnapshotStorageDestination.tsx b/web/src/components/snapshots/SnapshotStorageDestination.tsx
index 96cb2c71c7..9a8fbbb3a3 100644
--- a/web/src/components/snapshots/SnapshotStorageDestination.tsx
+++ b/web/src/components/snapshots/SnapshotStorageDestination.tsx
@@ -1831,7 +1831,6 @@ class SnapshotStorageDestination extends Component<Props, State> {
             }
           />
         </div>
-
         {this.props.showConfigureSnapshotsModal && (
           <ConfigureSnapshots
             snapshotSettings={this.props.snapshotSettings}
@@ -1850,7 +1849,6 @@ class SnapshotStorageDestination extends Component<Props, State> {
             isKurlEnabled={isKurlEnabled}
           />
         )}
-
         {this.state.showConfigureFileSystemProviderModal && (
           <Modal
             isOpen={this.state.showConfigureFileSystemProviderModal}
@@ -1863,7 +1861,6 @@ class SnapshotStorageDestination extends Component<Props, State> {
             {this.renderConfigureFileSystemProviderModalContent()}
           </Modal>
         )}
-
         {this.state.showFileSystemProviderInstructionsModal && (
           <Modal
             isOpen={this.state.showFileSystemProviderInstructionsModal}
@@ -1894,7 +1891,6 @@ class SnapshotStorageDestination extends Component<Props, State> {
             </div>
           </Modal>
         )}
-
         {showResetFileSystemWarningModal && (
           <Modal
             isOpen={showResetFileSystemWarningModal}
diff --git a/web/src/features/AdminConsole/api/getAdminConsoleUpdateStatus.tsx b/web/src/features/AdminConsole/api/getAdminConsoleUpdateStatus.tsx
index eed1af6223..bfb6b3defd 100644
--- a/web/src/features/AdminConsole/api/getAdminConsoleUpdateStatus.tsx
+++ b/web/src/features/AdminConsole/api/getAdminConsoleUpdateStatus.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 async function getAdminConsoleUpdateStatus({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/AdminConsole/api/postUpdateAdminConsole.tsx b/web/src/features/AdminConsole/api/postUpdateAdminConsole.tsx
index 2102992cbd..af52232b6c 100644
--- a/web/src/features/AdminConsole/api/postUpdateAdminConsole.tsx
+++ b/web/src/features/AdminConsole/api/postUpdateAdminConsole.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 async function postUpdateAdminConsole({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/App/api/getApps.test.jsx b/web/src/features/App/api/getApps.test.jsx
index 13a50d7044..f732f7074b 100644
--- a/web/src/features/App/api/getApps.test.jsx
+++ b/web/src/features/App/api/getApps.test.jsx
@@ -2,7 +2,7 @@
  * @jest-environment jsdom
  */
 import React from "react";
-import { QueryClient, QueryClientProvider } from "react-query";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 import { renderHook } from "@testing-library/react-hooks";
 import { getApps, useApps } from "./getApps";
 
@@ -21,7 +21,7 @@ describe("getApps", () => {
       };
     });
     it("calls _getApps", async () => {
-      const getAppsSpy = jest.fn(() => Promise.resolve());
+      const getAppsSpy = jest.fn(() => Promise.resolve({}));
 
       const { result, waitFor } = renderHook(
         () => useApps({ _getApps: getAppsSpy }),
diff --git a/web/src/features/App/api/getApps.tsx b/web/src/features/App/api/getApps.tsx
index e87aab43bf..d4c1dd3df6 100644
--- a/web/src/features/App/api/getApps.tsx
+++ b/web/src/features/App/api/getApps.tsx
@@ -1,6 +1,6 @@
 // This hook has not been integrated yet.
 import React from "react";
-import { useQuery, UseQueryResult } from "react-query";
+import { useQuery, UseQueryResult } from "@tanstack/react-query";
 import { Utilities } from "../../../utilities/utilities";
 import { App } from "@types";
 
@@ -44,7 +44,7 @@ function useApps({
 }> {
   const query: UseQueryResult<{
     apps: App[] | null;
-  }> = useQuery("apps", () => _getApps(), {
+  }> = useQuery(["apps"], () => _getApps(), {
     refetchInterval,
   });
 
diff --git a/web/src/features/App/api/getLicense.ts b/web/src/features/App/api/getLicense.ts
index 02160cdd9d..561e8938de 100644
--- a/web/src/features/App/api/getLicense.ts
+++ b/web/src/features/App/api/getLicense.ts
@@ -1,5 +1,5 @@
 // This hook has not been integrated yet.
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 import axios from "axios";
 import { AppLicense } from "@types";
diff --git a/web/src/features/App/api/postDeployAppVersion.tsx b/web/src/features/App/api/postDeployAppVersion.tsx
index 3bb0b15891..78b2f2387c 100644
--- a/web/src/features/App/api/postDeployAppVersion.tsx
+++ b/web/src/features/App/api/postDeployAppVersion.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useNavigate } from "react-router-dom";
 
 async function postDeployAppVersion({
diff --git a/web/src/features/App/api/postRedeployAppVersion.tsx b/web/src/features/App/api/postRedeployAppVersion.tsx
index 286d9fdbb2..f7952d2068 100644
--- a/web/src/features/App/api/postRedeployAppVersion.tsx
+++ b/web/src/features/App/api/postRedeployAppVersion.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 async function postRedeployAppVersion({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/AppVersionHistory/api/getDownloadAppVersionStatus.tsx b/web/src/features/AppVersionHistory/api/getDownloadAppVersionStatus.tsx
index d330da0fc3..8de3fc7f9f 100644
--- a/web/src/features/AppVersionHistory/api/getDownloadAppVersionStatus.tsx
+++ b/web/src/features/AppVersionHistory/api/getDownloadAppVersionStatus.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 async function getAdminConsoleUpdateStatus({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/AppVersionHistory/api/getVersions.tsx b/web/src/features/AppVersionHistory/api/getVersions.tsx
index 3a60d1439e..22891372cb 100644
--- a/web/src/features/AppVersionHistory/api/getVersions.tsx
+++ b/web/src/features/AppVersionHistory/api/getVersions.tsx
@@ -1,5 +1,5 @@
 // This hook has not been integrated yet. It's considered a work in progress
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Utilities } from "../../../utilities/utilities";
 import { useParams } from "react-router-dom";
 import { useSelectedApp } from "@features/App";
diff --git a/web/src/features/AppVersionHistory/api/postDownloadAppVersion.tsx b/web/src/features/AppVersionHistory/api/postDownloadAppVersion.tsx
index dd4b30ae6b..7f702a99c5 100644
--- a/web/src/features/AppVersionHistory/api/postDownloadAppVersion.tsx
+++ b/web/src/features/AppVersionHistory/api/postDownloadAppVersion.tsx
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 
 async function postDownloadAppVersion({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/Dashboard/api/createSnapshot.ts b/web/src/features/Dashboard/api/createSnapshot.ts
index 38e85ac057..99cb105fad 100644
--- a/web/src/features/Dashboard/api/createSnapshot.ts
+++ b/web/src/features/Dashboard/api/createSnapshot.ts
@@ -1,4 +1,4 @@
-import { useMutation } from "react-query";
+import { useMutation } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 
 interface SnapshotResponse {
diff --git a/web/src/features/Dashboard/api/getAirgapConfig.ts b/web/src/features/Dashboard/api/getAirgapConfig.ts
index 2e2713752a..9e79f5a086 100644
--- a/web/src/features/Dashboard/api/getAirgapConfig.ts
+++ b/web/src/features/Dashboard/api/getAirgapConfig.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 
 export const getAirgapConfig = async (appSlug: string): Promise<number> => {
diff --git a/web/src/features/Dashboard/api/getAppDownstream.ts b/web/src/features/Dashboard/api/getAppDownstream.ts
index 5f84272547..79d4d6ff04 100644
--- a/web/src/features/Dashboard/api/getAppDownstream.ts
+++ b/web/src/features/Dashboard/api/getAppDownstream.ts
@@ -1,5 +1,5 @@
 import { isAwaitingResults } from "@src/utilities/utilities";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 import { Downstream } from "@types";
 
diff --git a/web/src/features/Dashboard/api/getNextAppVersion.ts b/web/src/features/Dashboard/api/getNextAppVersion.ts
index 337f839229..9d25faaa13 100644
--- a/web/src/features/Dashboard/api/getNextAppVersion.ts
+++ b/web/src/features/Dashboard/api/getNextAppVersion.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 import axios from "axios";
 
diff --git a/web/src/features/Dashboard/api/getSelectedAppClusterDashboard.ts b/web/src/features/Dashboard/api/getSelectedAppClusterDashboard.ts
index 6f4e1c6160..038f19cb8e 100644
--- a/web/src/features/Dashboard/api/getSelectedAppClusterDashboard.ts
+++ b/web/src/features/Dashboard/api/getSelectedAppClusterDashboard.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useIsHelmManaged } from "@components/hooks";
 import { useSelectedApp } from "@features/App";
 import { DashboardResponse } from "@types";
diff --git a/web/src/features/Dashboard/api/getSnapshotSettings.ts b/web/src/features/Dashboard/api/getSnapshotSettings.ts
index c167a5bc8f..36db8da0fa 100644
--- a/web/src/features/Dashboard/api/getSnapshotSettings.ts
+++ b/web/src/features/Dashboard/api/getSnapshotSettings.ts
@@ -1,5 +1,5 @@
 import { SnapshotSettings } from "@types";
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 const getSnapshotSettings = async () => {
   const res = await fetch(`${process.env.API_ENDPOINT}/snapshots/settings`, {
diff --git a/web/src/features/Dashboard/api/getUpdateDownloadStatus.ts b/web/src/features/Dashboard/api/getUpdateDownloadStatus.ts
index 98e17ccda0..7f341cd30e 100644
--- a/web/src/features/Dashboard/api/getUpdateDownloadStatus.ts
+++ b/web/src/features/Dashboard/api/getUpdateDownloadStatus.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 
 export interface UpdateStatusResponse {
diff --git a/web/src/features/Dashboard/api/getUpdates.ts b/web/src/features/Dashboard/api/getUpdates.ts
index 4aca4e71c0..95c9d1d614 100644
--- a/web/src/features/Dashboard/api/getUpdates.ts
+++ b/web/src/features/Dashboard/api/getUpdates.ts
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { useSelectedApp } from "@features/App";
 
 interface UpdateResponse {
diff --git a/web/src/features/Gitops/hooks/useApps.tsx b/web/src/features/Gitops/hooks/useApps.tsx
index 971aea37e1..f38eefa3b2 100644
--- a/web/src/features/Gitops/hooks/useApps.tsx
+++ b/web/src/features/Gitops/hooks/useApps.tsx
@@ -1,7 +1,7 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Utilities } from "../../../utilities/utilities";
 
-// TODO: replace with fetatures/App/api
+// TODO: replace with features/App/api
 async function getApps({
   apiEndpoint = process.env.API_ENDPOINT,
   _fetch = fetch,
diff --git a/web/src/features/Gitops/hooks/useGitops.js b/web/src/features/Gitops/hooks/useGitops.js
index 9994b4a120..f72f63d12e 100644
--- a/web/src/features/Gitops/hooks/useGitops.js
+++ b/web/src/features/Gitops/hooks/useGitops.js
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { Utilities } from "../../../utilities/utilities";
 
 async function getGitops({
diff --git a/web/src/features/PreflightChecks/api/getPreflightResult.tsx b/web/src/features/PreflightChecks/api/getPreflightResult.tsx
index d4d3a0dcac..143d963db7 100644
--- a/web/src/features/PreflightChecks/api/getPreflightResult.tsx
+++ b/web/src/features/PreflightChecks/api/getPreflightResult.tsx
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 import { PreflightCheck, PreflightResponse } from "../types";
 import { useState } from "react";
 
diff --git a/web/src/features/PreflightChecks/api/postIgnorePermissionErrors.tsx b/web/src/features/PreflightChecks/api/postIgnorePermissionErrors.tsx
index 6aed9ebc34..102a08802c 100644
--- a/web/src/features/PreflightChecks/api/postIgnorePermissionErrors.tsx
+++ b/web/src/features/PreflightChecks/api/postIgnorePermissionErrors.tsx
@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 async function postIgnorePermissionErrors({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/features/PreflightChecks/api/postPreflightRun.tsx b/web/src/features/PreflightChecks/api/postPreflightRun.tsx
index f4512b67ba..8ae419c23f 100644
--- a/web/src/features/PreflightChecks/api/postPreflightRun.tsx
+++ b/web/src/features/PreflightChecks/api/postPreflightRun.tsx
@@ -1,4 +1,4 @@
-import { useMutation, useQueryClient } from "react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 
 async function postPreflightRun({
   apiEndpoint = process.env.API_ENDPOINT,
diff --git a/web/src/stores/getMetadata.jsx b/web/src/stores/getMetadata.jsx
index a27655aed5..774e789162 100644
--- a/web/src/stores/getMetadata.jsx
+++ b/web/src/stores/getMetadata.jsx
@@ -1,4 +1,4 @@
-import { useQuery } from "react-query";
+import { useQuery } from "@tanstack/react-query";
 
 async function getMetadata({
   apiEndpoint = process.env.API_ENDPOINT,
@@ -19,7 +19,7 @@ async function getMetadata({
 }
 
 function useMetadata({ _getMetadata = getMetadata } = {}) {
-  return useQuery("metadata", () => _getMetadata(), {
+  return useQuery(["metadata"], () => _getMetadata(), {
     staleTime: Infinity,
   });
 }
diff --git a/web/webpack.config.dev.js b/web/webpack.config.dev.js
index fccf7a8733..e3313b88c6 100644
--- a/web/webpack.config.dev.js
+++ b/web/webpack.config.dev.js
@@ -2,7 +2,6 @@ const ReactRefreshWebpackPlugin = require("@pmmmwh/react-refresh-webpack-plugin"
 const ESLintPlugin = require("eslint-webpack-plugin");
 const webpack = require("webpack");
 const path = require("path");
-const srcPath = path.join(__dirname, "src");
 
 module.exports = {
   mode: "development",
diff --git a/web/webpack.config.js b/web/webpack.config.js
index 46d19f1331..4b913d13b2 100644
--- a/web/webpack.config.js
+++ b/web/webpack.config.js
@@ -9,9 +9,9 @@ const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
 // const { BundleAnalyzerPlugin } = require("webpack-bundle-analyzer");
 
 function mapEnvironment(env) {
-  if(env.enterprise) {
+  if (env.enterprise) {
     return "enterprise";
-  } else if(process.env.OKTETO_NAMESPACE) {
+  } else if (process.env.OKTETO_NAMESPACE) {
     return "okteto";
   }
   return "skaffold";
@@ -22,20 +22,34 @@ module.exports = function (env) {
   const distPath = path.join(__dirname, "dist");
   const srcPath = path.join(__dirname, "src");
   const appEnv = require(`./env/${mapEnvironment(env)}.js`);
-  const replace = {}
-  Object.entries(appEnv).forEach(([key, value]) => replace[`process.env.${key}`] = JSON.stringify(value))
-  if(env.enterprise) {
-    process.env.NODE_ENV = "production"
+  const replace = {};
+  Object.entries(appEnv).forEach(
+    ([key, value]) => (replace[`process.env.${key}`] = JSON.stringify(value))
+  );
+  if (env.enterprise) {
+    process.env.NODE_ENV = "production";
   }
 
   const common = {
     output: {
       path: distPath,
       publicPath: "/",
-      filename: "[name].[fullhash].js"
+      filename: "[name].[fullhash].js",
     },
     resolve: {
-      extensions: [".js", ".mjs", ".jsx", ".css", ".scss", ".png", ".jpg", ".svg", ".ico", ".tsx", ".ts"],
+      extensions: [
+        ".js",
+        ".mjs",
+        ".jsx",
+        ".css",
+        ".scss",
+        ".png",
+        ".jpg",
+        ".svg",
+        ".ico",
+        ".tsx",
+        ".ts",
+      ],
       fallback: {
         fs: false,
         stream: require.resolve("stream-browserify"),
@@ -44,7 +58,7 @@ module.exports = function (env) {
         constants: require.resolve("constants-browserify"),
         util: require.resolve("util/"),
         os: require.resolve("os-browserify/browser"),
-        tty: require.resolve("tty-browserify")
+        tty: require.resolve("tty-browserify"),
       },
       alias: {
         "@components": path.resolve(__dirname, "src/components"),
@@ -52,8 +66,8 @@ module.exports = function (env) {
         "@stores": path.resolve(__dirname, "src/stores"),
         "@types": path.resolve(__dirname, "src/types/index"),
         "@utils": path.resolve(__dirname, "src/utilities/index"),
-        "handlebars" : "handlebars/dist/handlebars.js",
-        "@src": path.resolve(__dirname, "src")
+        handlebars: "handlebars/dist/handlebars.js",
+        "@src": path.resolve(__dirname, "src"),
       },
       mainFields: ["browser", "main"],
     },
@@ -62,7 +76,7 @@ module.exports = function (env) {
         {
           test: /\.mjs$/,
           include: /node_modules/,
-          type: "javascript/auto"
+          type: "javascript/auto",
         },
         {
           test: /\.css$/,
@@ -70,13 +84,13 @@ module.exports = function (env) {
             "style-loader",
             // { loader: MiniCssExtractPlugin.loader },
             "css-loader",
-            "postcss-loader"
+            "postcss-loader",
           ],
           sideEffects: true,
         },
         {
           test: /\.ttf$/,
-          use: [{loader: 'file-loader'}],
+          use: [{ loader: "file-loader" }],
           sideEffects: true,
         },
         {
@@ -116,17 +130,17 @@ module.exports = function (env) {
               options: {
                 limit: 10000,
                 mimetype: "application/font-woff",
-                name: "./assets/[fullhash].[ext]"
-              }
-            }
-          ]
+                name: "./assets/[fullhash].[ext]",
+              },
+            },
+          ],
         },
         {
           test: /\.m?js/,
           resolve: {
-              fullySpecified: false
-          }
-        }
+            fullySpecified: false,
+          },
+        },
       ],
     },
     plugins: [
@@ -141,10 +155,7 @@ module.exports = function (env) {
         inject: "body",
       }),
       new MonacoWebpackPlugin({
-        languages: [
-          "yaml",
-          "json"
-        ],
+        languages: ["yaml", "json"],
         features: [
           "coreCommands",
           "folding",
@@ -152,20 +163,22 @@ module.exports = function (env) {
           "clipboard",
           "find",
           "colorDetector",
-          "codelens"
-        ]
+          "codelens",
+        ],
       }),
-      new webpack.ContextReplacementPlugin(/graphql-language-service-interface[/\\]dist/, /\.js$/),
+      new webpack.ContextReplacementPlugin(
+        /graphql-language-service-interface[/\\]dist/,
+        /\.js$/
+      ),
       new MiniCssExtractPlugin({
         filename: "style.[fullhash].css",
-        chunkFilename: "[id].css"
-      })
+        chunkFilename: "[id].css",
+      }),
       // new BundleAnalyzerPlugin({
       //   generateStatsFile: true,
       //   analyzerHost: "0.0.0.0",
       //   analyzerPort: 30088
       // })
-      ,
     ],
   };
 
diff --git a/web/yarn.lock b/web/yarn.lock
index 55cbb3f645..d8d7d15bd8 100644
--- a/web/yarn.lock
+++ b/web/yarn.lock
@@ -1376,7 +1376,7 @@
   dependencies:
     regenerator-runtime "^0.13.11"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.7.2", "@babel/runtime@^7.9.2":
   version "7.17.9"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.17.9.tgz"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -3661,6 +3661,35 @@
     regenerator-runtime "^0.13.7"
     resolve-from "^5.0.0"
 
+"@tanstack/match-sorter-utils@^8.7.0":
+  version "8.8.4"
+  resolved "https://registry.yarnpkg.com/@tanstack/match-sorter-utils/-/match-sorter-utils-8.8.4.tgz#0b2864d8b7bac06a9f84cb903d405852cc40a457"
+  integrity sha512-rKH8LjZiszWEvmi01NR72QWZ8m4xmXre0OOwlRGnjU01Eqz/QnN+cqpty2PJ0efHblq09+KilvyR7lsbzmXVEw==
+  dependencies:
+    remove-accents "0.4.2"
+
+"@tanstack/query-core@4.36.1":
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/query-core/-/query-core-4.36.1.tgz#79f8c1a539d47c83104210be2388813a7af2e524"
+  integrity sha512-DJSilV5+ytBP1FbFcEJovv4rnnm/CokuVvrBEtW/Va9DvuJ3HksbXUJEpI0aV1KtuL4ZoO9AVE6PyNLzF7tLeA==
+
+"@tanstack/react-query-devtools@^4.36.1":
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query-devtools/-/react-query-devtools-4.36.1.tgz#7e63601135902a993ca9af73507b125233b1554e"
+  integrity sha512-WYku83CKP3OevnYSG8Y/QO9g0rT75v1om5IvcWUwiUZJ4LanYGLVCZ8TdFG5jfsq4Ej/lu2wwDAULEUnRIMBSw==
+  dependencies:
+    "@tanstack/match-sorter-utils" "^8.7.0"
+    superjson "^1.10.0"
+    use-sync-external-store "^1.2.0"
+
+"@tanstack/react-query@^4.36.1":
+  version "4.36.1"
+  resolved "https://registry.yarnpkg.com/@tanstack/react-query/-/react-query-4.36.1.tgz#acb589fab4085060e2e78013164868c9c785e5d2"
+  integrity sha512-y7ySVHFyyQblPl3J3eQBWpXZkliroki3ARnBKsdJchlgt7yJLRDUcf4B8soufgiYt3pEQIkBWBx1N9/ZPIeUWw==
+  dependencies:
+    "@tanstack/query-core" "4.36.1"
+    use-sync-external-store "^1.2.0"
+
 "@testing-library/dom@^8.3.0":
   version "8.19.0"
   resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.19.0.tgz#bd3f83c217ebac16694329e413d9ad5fdcfd785f"
@@ -6037,7 +6066,7 @@ better-opn@^2.1.1:
   dependencies:
     open "^7.0.3"
 
-big-integer@^1.6.16, big-integer@^1.6.17, big-integer@^1.6.7:
+big-integer@^1.6.17, big-integer@^1.6.7:
   version "1.6.51"
   resolved "https://registry.npmjs.org/big-integer/-/big-integer-1.6.51.tgz"
   integrity sha512-GPEid2Y9QU1Exl1rpO9B2IPJGHPSupF5GnVIP0blYvNOMer2bTvSWs1jGOUg04hTmu67nmLsQ9TBo1puaotBHg==
@@ -6212,20 +6241,6 @@ braces@^3.0.2, braces@~3.0.2:
   dependencies:
     fill-range "^7.0.1"
 
-broadcast-channel@^3.4.1:
-  version "3.7.0"
-  resolved "https://registry.npmjs.org/broadcast-channel/-/broadcast-channel-3.7.0.tgz"
-  integrity sha512-cIAKJXAxGJceNZGTZSBzMxzyOn72cVgPnKx4dc6LRjQgbaJUQqhy5rzL3zbMxkMWsGKkv2hSFkPRMEXfoMZ2Mg==
-  dependencies:
-    "@babel/runtime" "^7.7.2"
-    detect-node "^2.1.0"
-    js-sha3 "0.8.0"
-    microseconds "0.2.0"
-    nano-time "1.0.0"
-    oblivious-set "1.0.0"
-    rimraf "3.0.2"
-    unload "2.2.0"
-
 brorand@^1.0.1, brorand@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
@@ -7026,6 +7041,13 @@ cookie@^0.4.0:
   resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.2.tgz"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
 
+copy-anything@^3.0.2:
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/copy-anything/-/copy-anything-3.0.5.tgz#2d92dce8c498f790fa7ad16b01a1ae5a45b020a0"
+  integrity sha512-yCEafptTtb4bk7GLEQoM8KVJpxAfdBJYaXyzQEgQQQgYrZiDp8SJmGKlYza6CYjEDNstAdNdKA3UuoULlEbS6w==
+  dependencies:
+    is-what "^4.1.8"
+
 copy-concurrently@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/copy-concurrently/-/copy-concurrently-1.0.5.tgz#92297398cae34937fcafd6ec8139c18051f0b5e0"
@@ -7664,7 +7686,7 @@ detect-newline@^3.0.0:
   resolved "https://registry.npmjs.org/detect-newline/-/detect-newline-3.1.0.tgz"
   integrity sha512-TLz+x/vEXm/Y7P7wn1EJFNLxYpUD4TgMosxY6fAVJUnJMbupHBOncxyWUG9OpTaH9EBD7uFI5LfEgmMOc54DsA==
 
-detect-node@^2.0.4, detect-node@^2.1.0:
+detect-node@^2.0.4:
   version "2.1.0"
   resolved "https://registry.npmjs.org/detect-node/-/detect-node-2.1.0.tgz"
   integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
@@ -10498,6 +10520,11 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-what@^4.1.8:
+  version "4.1.15"
+  resolved "https://registry.yarnpkg.com/is-what/-/is-what-4.1.15.tgz#de43a81090417a425942d67b1ae86e7fae2eee0e"
+  integrity sha512-uKua1wfy3Yt+YqsD6mTUEa2zSi3G1oPlqTflgaPJ7z63vUGN5pxFpnQfeSLMFnJDEsdvOtkp1rUWkYjB4YfhgA==
+
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -11153,11 +11180,6 @@ joycon@^2.2.5:
   resolved "https://registry.npmjs.org/joycon/-/joycon-2.2.5.tgz"
   integrity sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ==
 
-js-sha3@0.8.0:
-  version "0.8.0"
-  resolved "https://registry.npmjs.org/js-sha3/-/js-sha3-0.8.0.tgz"
-  integrity sha512-gF1cRrHhIzNfToc802P800N8PpXS+evLLXfsVpowqmAFR9uwbi89WvXg2QspOmXL8QL86J4T1EpFu+yUkwJY3Q==
-
 js-string-escape@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
@@ -11734,14 +11756,6 @@ marked@4.0.12:
   resolved "https://registry.npmjs.org/marked/-/marked-4.0.12.tgz"
   integrity sha512-hgibXWrEDNBWgGiK18j/4lkS6ihTe9sxtV4Q1OQppb/0zzyPSzoFANBa5MfsG/zgsWklmNnhm0XACZOH/0HBiQ==
 
-match-sorter@^6.0.2:
-  version "6.3.1"
-  resolved "https://registry.npmjs.org/match-sorter/-/match-sorter-6.3.1.tgz"
-  integrity sha512-mxybbo3pPNuA+ZuCUhm5bwNkXrJTbsk5VWbR5wiwz/GC6LIiegBGn2w3O08UG/jdbYLinw51fSQ5xNU1U3MgBw==
-  dependencies:
-    "@babel/runtime" "^7.12.5"
-    remove-accents "0.4.2"
-
 md5.js@^1.3.4:
   version "1.3.5"
   resolved "https://registry.yarnpkg.com/md5.js/-/md5.js-1.3.5.tgz#b5d07b8e3216e3e27cd728d72f70d1e6a342005f"
@@ -11933,11 +11947,6 @@ micromatch@^4.0.0, micromatch@^4.0.2, micromatch@^4.0.4, micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
-microseconds@0.2.0:
-  version "0.2.0"
-  resolved "https://registry.npmjs.org/microseconds/-/microseconds-0.2.0.tgz"
-  integrity sha512-n7DHHMjR1avBbSpsTBj6fmMGh2AGrifVV4e+WYc3Q9lO+xnSZ3NyhcBND3vzzatt05LFhoKFRxrIyklmLlUtyA==
-
 miller-rabin@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/miller-rabin/-/miller-rabin-4.0.1.tgz#f080351c865b0dc562a8462966daa53543c78a4d"
@@ -12199,13 +12208,6 @@ nan@^2.12.1:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.17.0.tgz#c0150a2368a182f033e9aa5195ec76ea41a199cb"
   integrity sha512-2ZTgtl0nJsO0KQCjEpxcIr5D+Yv90plTitZt9JBfQvVJDS5seMl3FOvsh3+9CoYWXf/1l5OaZzzF6nDm4cagaQ==
 
-nano-time@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/nano-time/-/nano-time-1.0.0.tgz"
-  integrity sha512-flnngywOoQ0lLQOTRNexn2gGSNuM9bKj9RZAWSzhQ+UJYaAFG9bac4DW9VHjUAzrOaIcajHybCTHe/bkvozQqA==
-  dependencies:
-    big-integer "^1.6.16"
-
 nanoid@^3.3.1, nanoid@^3.3.4:
   version "3.3.4"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab"
@@ -12601,11 +12603,6 @@ objectorarray@^1.0.5:
   resolved "https://registry.yarnpkg.com/objectorarray/-/objectorarray-1.0.5.tgz#2c05248bbefabd8f43ad13b41085951aac5e68a5"
   integrity sha512-eJJDYkhJFFbBBAxeh8xW+weHlkI28n2ZdQV/J/DNfWfSKlGEf2xcfAbZTv3riEXHAhL9SVOTs2pRmXiSTf78xg==
 
-oblivious-set@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/oblivious-set/-/oblivious-set-1.0.0.tgz"
-  integrity sha512-z+pI07qxo4c2CulUHCDf9lcqDlMSo72N/4rLUpRXf6fu+q8vjt8y0xS+Tlf8NTJDdTXHbdeO1n3MlbctwEoXZw==
-
 obuf@^1.0.0, obuf@^1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz"
@@ -13906,15 +13903,6 @@ react-motion@^0.5.2:
     prop-types "^15.5.8"
     raf "^3.1.0"
 
-react-query@^3.39.1:
-  version "3.39.1"
-  resolved "https://registry.npmjs.org/react-query/-/react-query-3.39.1.tgz"
-  integrity sha512-qYKT1bavdDiQZbngWZyPotlBVzcBjDYEJg5RQLBa++5Ix5jjfbEYJmHSZRZD+USVHUSvl/ey9Hu+QfF1QAK80A==
-  dependencies:
-    "@babel/runtime" "^7.5.5"
-    broadcast-channel "^3.4.1"
-    match-sorter "^6.0.2"
-
 react-refresh@^0.11.0:
   version "0.11.0"
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
@@ -14336,7 +14324,7 @@ remarkable@^1.x:
 
 remove-accents@0.4.2:
   version "0.4.2"
-  resolved "https://registry.npmjs.org/remove-accents/-/remove-accents-0.4.2.tgz"
+  resolved "https://registry.yarnpkg.com/remove-accents/-/remove-accents-0.4.2.tgz#0a43d3aaae1e80db919e07ae254b285d9e1c7bb5"
   integrity sha512-7pXIJqJOq5tFgG1A2Zxti3Ht8jJF337m4sowbuHsW30ZnkQFnDzy9qBNhgzX8ZLW4+UBcXiiR7SwR6pokHsxiA==
 
 remove-trailing-separator@^1.0.1:
@@ -14503,7 +14491,7 @@ rimraf@2.6.2:
   dependencies:
     glob "^7.0.5"
 
-rimraf@3.0.2, rimraf@^3.0.0, rimraf@^3.0.2:
+rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
@@ -15509,6 +15497,13 @@ sumchecker@^2.0.2:
   dependencies:
     debug "^2.2.0"
 
+superjson@^1.10.0:
+  version "1.13.3"
+  resolved "https://registry.yarnpkg.com/superjson/-/superjson-1.13.3.tgz#3bd64046f6c0a47062850bb3180ef352a471f930"
+  integrity sha512-mJiVjfd2vokfDxsQPOwJ/PtanO87LhpYY88ubI5dUB1Ab58Txbyje3+jpm+/83R/fevaq/107NNhtYBLuoTrFg==
+  dependencies:
+    copy-anything "^3.0.2"
+
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz"
@@ -16312,14 +16307,6 @@ unixify@1.0.0:
   dependencies:
     normalize-path "^2.1.1"
 
-unload@2.2.0:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/unload/-/unload-2.2.0.tgz"
-  integrity sha512-B60uB5TNBLtN6/LsgAf3udH9saB5p7gqJwcFfbOEZ8BcBHnGwCf6G/TGiEqkRAxX7zAFIUtzdrXQSdL3Q/wqNA==
-  dependencies:
-    "@babel/runtime" "^7.6.2"
-    detect-node "^2.0.4"
-
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
@@ -16417,6 +16404,11 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-sync-external-store@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"
+  integrity sha512-eEgnFxGQ1Ife9bzYs6VLi8/4X6CObHMw9Qr9tPY43iKwsPw8xE8+EFsf/2cFZ5S3esXgpWgtSCtLNS41F+sKPA==
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"