Upgrade @tanstack/react-query to version 5 (✓ Sandbox Passed)

convertPheno_client/package.json

@@ -12,7 +12,7 @@
     "@mui/material": "^5.14.20",
     "@mui/system": "^5.14.20",
     "@mui/x-tree-view": "^6.17.0",
-    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query": "5.x.x",
     "ag-grid-community": "^31.0.0",
     "ag-grid-react": "^31.0.0",
     "axios": "^1.6.2",

convertPheno_client/src/code/Main.jsx

@@ -12,13 +12,13 @@
 
 import React from "react";
 import { HashRouter } from "react-router-dom";
-import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { createQueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query/devtools";
 import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import App from "./App";
 
-const queryClient = new QueryClient();
+const queryClient = createQueryClient();
 
 export default function Main() {
   return (

convertPheno_client/src/code/views/conversion/ components/clinicalData/ClinicalData.jsx

@@ -12,7 +12,7 @@
 
 import React, { useEffect, useState } from "react";
 import { useLocation } from "react-router-dom";
-import { useQueryClient } from "@tanstack/react-query";
+import { useQueryClient, QueryClient } from "@tanstack/react-query";
 
 import SimpleTabs from "./components/simpleTabs/SimpleTabs";
 import useQueryBuilder from "./components/queryBuilder/hooks/useQueryBuilder";
@@ -28,7 +28,7 @@ export default function ClinicalData(props) {
   */
   const { outputFormats, jobId } = props;
   const location = useLocation();
-  const queryClient = useQueryClient();
+  const queryClient = new QueryClient();
 
   const [tabValue, setTabValue] = useState(0);
   const [shownColumns, setShownColumns] = useState({});
@@ -59,7 +59,7 @@ export default function ClinicalData(props) {
   });
 
   useEffect(() => {
-    queryClient.invalidateQueries("resultsQuery", { refetchActive: true });
+    queryClient.invalidateQueries("resultsQuery");
   }, [location, queryClient, shownColumns]);
 
   const renderQueryBuilder = useQueryBuilder({

convertPheno_client/src/code/views/conversion/ components/submission/Submission.jsx

@@ -35,7 +35,7 @@ export default function Submission(props) {
   const [uploadedFiles, setUploadedFiles] = useState({});
   const [startFileConversion, setStartFileConversion] = useState(false);
 
-  const queryClient = useQueryClient();
+  const queryClient = new QueryClient();
   const navigate = useNavigate();
 
   const { status, data } = useFileConversions({

convertPheno_client/src/code/views/conversion/hooks/finishedJobs.jsx

@@ -10,7 +10,7 @@
   License: GPL-3.0 license
 */
 
-import { useQuery } from "@tanstack/react-query";
+import { useQuery } from "react-query";
 import apiRequest from "../../../ApiRequest";
 
 export default function useFinishedJobs(props) {
@@ -34,6 +34,8 @@ export default function useFinishedJobs(props) {
       cacheTime: 200,
       staleTime: 300_000,
       onSuccess: (data) => {},
+      refetchOnWindowFocus: false,
+      refetchOnReconnect: false
     }
   );
 }