upgrade tanstack query (#4068)

* upgrade tanstack query

* finish code mods, revert webpack config changes

* revert env change

* linting/formatting

* fix typo, update test

* revert change to file

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",

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";

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";
 

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,
   });

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,

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";
 

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}

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,

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,

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 }),

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,
   });
 

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";

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({

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,

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,

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";

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,

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 {

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> => {

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";
 

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";
 

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";

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`, {

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 {

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 {

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,

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({

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";
 

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,

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,

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,
   });
 }

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",