Merge pull request #322 from ral-facilities/renovate/major-tanstack-q…

…uery-monorepo

Update tanstack-query monorepo to v5 (major)

package.json

@@ -13,8 +13,8 @@
     "@mui/system": "5.15.6",
     "@mui/x-date-pickers": "^6.19.0",
     "@reduxjs/toolkit": "2.1.0",
-    "@tanstack/react-query": "4.29.5",
-    "@tanstack/react-query-devtools": "4.29.6",
+    "@tanstack/react-query": "5.18.1",
+    "@tanstack/react-query-devtools": "5.18.1",
     "@tanstack/react-table": "8.11.6",
     "@tanstack/react-virtual": "beta",
     "@types/jest": "29.5.2",

src/App.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import ViewTabs from './views/viewTabs.component';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import {
+  QueryClient,
+  QueryClientProvider,
+  QueryCache,
+} from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { configureApp } from './state/slices/configSlice';
 import { requestPluginRerender } from './state/scigateway.actions';
@@ -20,6 +24,12 @@ const queryClient = new QueryClient({
       staleTime: 300000,
     },
   },
+  // TODO: implement proper error handling
+  queryCache: new QueryCache({
+    onError: (error) => {
+      console.log('Got error ' + error.message);
+    },
+  }),
 });
 
 function mapPreloaderStateToProps(state: RootState): { loading: boolean } {

src/api/channels.test.tsx

@@ -227,13 +227,13 @@ describe('channels api functions', () => {
       );
 
       expect(result.current.isFetching).toBeFalsy();
-      expect(result.current.isLoading).toBeTruthy();
+      expect(result.current.isPending).toBeTruthy();
       expect(requestSent).toBe(false);
 
       rerender('timestamp');
 
       expect(result.current.isFetching).toBeFalsy();
-      expect(result.current.isLoading).toBeTruthy();
+      expect(result.current.isPending).toBeTruthy();
       expect(requestSent).toBe(false);
     });
 

src/api/channels.tsx

@@ -105,22 +105,21 @@ const fetchChannelSummary = (
 
 // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-constraint
 export const useChannels = <T extends unknown = FullChannelMetadata[]>(
-  options?: UseQueryOptions<FullChannelMetadata[], AxiosError, T, string[]>
+  options?: Omit<
+    UseQueryOptions<FullChannelMetadata[], AxiosError, T, string[]>,
+    'queryKey'
+  >
 ): UseQueryResult<T, AxiosError> => {
   const { apiUrl } = useAppSelector(selectUrls);
 
-  return useQuery(
-    ['channels'],
-    (params) => {
+  return useQuery({
+    queryKey: ['channels'],
+    queryFn: (params) => {
       return fetchChannels(apiUrl);
     },
-    {
-      onError: (error) => {
-        console.log('Got error ' + error.message);
-      },
-      ...(options ?? {}),
-    }
-  );
+
+    ...(options ?? {}),
+  });
 };
 
 export const useChannelSummary = (
@@ -132,18 +131,15 @@ export const useChannelSummary = (
       ? channel
       : '';
 
-  return useQuery(
-    ['channelSummary', dataChannel],
-    (params) => {
+  return useQuery({
+    queryKey: ['channelSummary', dataChannel],
+
+    queryFn: (params) => {
       return fetchChannelSummary(apiUrl, dataChannel);
     },
-    {
-      onError: (error) => {
-        console.log('Got error ' + error.message);
-      },
-      enabled: dataChannel.length !== 0,
-    }
-  );
+
+    enabled: dataChannel.length !== 0,
+  });
 };
 
 export const constructColumnDefs = (

src/api/experiment.tsx

@@ -23,15 +23,11 @@ export const useExperiment = (): UseQueryResult<
 > => {
   const { apiUrl } = useAppSelector(selectUrls);
 
-  return useQuery(
-    ['experiments'],
-    (params) => {
+  return useQuery({
+    queryKey: ['experiments'],
+
+    queryFn: (params) => {
       return fetchExperiment(apiUrl);
     },
-    {
-      onError: (error) => {
-        console.log('Got error ' + error.message);
-      },
-    }
-  );
+  });
 };