HMS-9683: migrate react-query to v5

package.json

@@ -34,15 +34,16 @@
   "dependencies": {
     "@patternfly/react-core": "^6.3.1",
     "@patternfly/react-data-view": "^6.3.0",
+    "@patternfly/react-drag-drop": "^6.3.1",
     "@patternfly/react-icons": "^6.3.1",
     "@patternfly/react-styles": "^6.3.1",
     "@patternfly/react-table": "^6.3.1",
     "@patternfly/react-templates": "^6.4.1",
-    "@patternfly/react-drag-drop": "^6.4.1",
     "@redhat-cloud-services/frontend-components": "^7.0.40",
     "@redhat-cloud-services/frontend-components-config": "^6.7.51",
     "@redhat-cloud-services/frontend-components-notifications": "^6.1.41",
     "@redhat-cloud-services/frontend-components-utilities": "^7.0.36",
+    "@tanstack/react-query": "^5.90.19",
     "@testing-library/dom": "^10.4.1",
     "@types/dockerode": "^4.0.1",
     "@unleash/proxy-client-react": "^5.0.1",
@@ -60,7 +61,6 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-jss": "^10.10.0",
-    "react-query": "^3.39.3",
     "react-redux": "^9.1.2",
     "react-router-dom": "^6.30.3",
     "react18-json-view": "^0.2.8",

src/App.tsx

@@ -1,7 +1,7 @@
 import '@redhat-cloud-services/frontend-components-utilities/styles/_all';
 import 'react18-json-view/src/style.css';
 import { useChrome } from '@redhat-cloud-services/frontend-components/useChrome';
-import { NotificationsProvider } from '@redhat-cloud-services/frontend-components-notifications';
+
 import { Bullseye, Spinner } from '@patternfly/react-core';
 import { useEffect, useMemo, useState } from 'react';
 import { useLocation } from 'react-router-dom';
@@ -67,9 +67,9 @@ export default function App() {
   }
 
   return (
-    <NotificationsProvider>
+    <>
       <div data-ouia-safe={pageSafe} />
       <Routes />
-    </NotificationsProvider>
+    </>
   );
 }

src/AppEntry.tsx

@@ -1,25 +1,24 @@
+import { AlertVariant } from '@patternfly/react-core';
+import {
+  createStore as createNotificationStore,
+  NotificationsProvider,
+} from '@redhat-cloud-services/frontend-components-notifications';
+import { QueryCache, QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import React, { useEffect } from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
 import { Provider as ReduxProvider } from 'react-redux';
 import * as Redux from 'redux';
 
+import { composeErrorDescription } from 'Hooks/useErrorNotification';
 import App from './App';
-
 import { ContextProvider } from './middleware/AppContext';
 import { createStore, restoreStore } from './store';
 
-const queryClient = new QueryClient({
-  defaultOptions: {
-    queries: {
-      refetchOnWindowFocus: false,
-    },
-  },
-});
-
 interface AppEntryProps {
   logger?: Redux.Middleware;
 }
 
+const notificationsStore = createNotificationStore();
+
 export default function AppEntry({ logger }: AppEntryProps) {
   const store = React.useMemo(() => {
     restoreStore();
@@ -33,13 +32,41 @@ export default function AppEntry({ logger }: AppEntryProps) {
     insights?.chrome?.appAction?.('view-list-page');
   }, []);
 
+  const [queryClient] = React.useState(
+    new QueryClient({
+      defaultOptions: {
+        queries: {
+          refetchOnWindowFocus: false,
+        },
+      },
+      queryCache: new QueryCache({
+        onError: (_, query) => {
+          if (query.meta?.title) {
+            const { title, description } = composeErrorDescription(
+              query.meta.title as string,
+              'An error occurred',
+              query.state.error,
+            );
+            notificationsStore.addNotification({
+              title,
+              description,
+              variant: AlertVariant.danger,
+            });
+          }
+        },
+      }),
+    }),
+  );
+
   return (
     <ReduxProvider store={store}>
-      <QueryClientProvider client={queryClient}>
-        <ContextProvider>
-          <App />
-        </ContextProvider>
-      </QueryClientProvider>
+      <NotificationsProvider store={notificationsStore}>
+        <QueryClientProvider client={queryClient}>
+          <ContextProvider>
+            <App />
+          </ContextProvider>
+        </QueryClientProvider>
+      </NotificationsProvider>
     </ReduxProvider>
   );
 }

src/Hooks/useErrorNotification.tsx

@@ -1,6 +1,38 @@
 import { AlertVariant } from '@patternfly/react-core';
 import useNotification from './useNotification';
 
+export function composeErrorDescription(
+  defaultTitle: string,
+  defaultDescription: string,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  err: any,
+) {
+  let title = defaultTitle;
+
+  let description = defaultDescription;
+
+  switch (typeof err?.response?.data) {
+    case 'string':
+      description = err.response.data;
+      break;
+    case 'object':
+      // Only show the first error
+      err?.response?.data.errors?.find(
+        ({ title: errTitle, detail, description: errDescription }) => {
+          if (errTitle) title = errTitle;
+          if (errDescription) description = errDescription;
+          if (detail) description = detail;
+          if (errTitle || errDescription || detail) return true;
+        },
+      );
+      break;
+    default:
+      break;
+  }
+
+  return { title, description };
+}
+
 export default function useErrorNotification() {
   const { notify } = useNotification();
 
@@ -11,27 +43,7 @@ export default function useErrorNotification() {
     err: any,
     id: string,
   ) => {
-    let title = defaultTitle;
-    let description = defaultDescription;
-
-    switch (typeof err?.response?.data) {
-      case 'string':
-        description = err.response.data;
-        break;
-      case 'object':
-        // Only show the first error
-        err?.response?.data.errors?.find(
-          ({ title: errTitle, detail, description: errDescription }) => {
-            if (errTitle) title = errTitle;
-            if (errDescription) description = errDescription;
-            if (detail) description = detail;
-            if (errTitle || errDescription || detail) return true;
-          },
-        );
-        break;
-      default:
-        break;
-    }
+    const { title, description } = composeErrorDescription(defaultTitle, defaultDescription, err);
 
     notify({
       variant: AlertVariant.danger,

src/Hooks/useHasRegisteredSystems.ts

@@ -1,4 +1,4 @@
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useSystemsListQuery } from '../services/Systems/SystemsQueries';
 import { TemplateItem } from '../services/Templates/TemplateApi';
 import { FETCH_TEMPLATE_KEY } from '../services/Templates/TemplateQueries';

src/Hooks/usePageSafe.tsx

@@ -1,4 +1,4 @@
-import { useIsFetching, useIsMutating } from 'react-query';
+import { useIsFetching, useIsMutating } from '@tanstack/react-query';
 import useDebounce from './useDebounce';
 
 function usePageSafe(): boolean {

src/Pages/Repositories/AdminTaskTable/components/AdminTaskFilters.test.tsx

@@ -6,7 +6,7 @@ jest.mock('middleware/AppContext', () => ({
   useAppContext: () => ({}),
 }));
 
-jest.mock('react-query');
+jest.mock('@tanstack/react-query');
 
 it('Render loading state (disabled)', () => {
   const { getByRole } = render(

src/Pages/Repositories/ContentListTable/ContentListTable.tsx

@@ -44,7 +44,7 @@ import {
   BulkSelectValue,
 } from '@patternfly/react-component-groups/dist/dynamic/BulkSelect';
 import flex from '@patternfly/react-styles/css/utilities/Flex/flex';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import StatusIcon from './components/StatusIcon';
 import spacing from '@patternfly/react-styles/css/utilities/Spacing/spacing';
 import { SkeletonTableBody } from '@patternfly/react-component-groups';

src/Pages/Repositories/ContentListTable/components/AddContent/AddContent.tsx

@@ -51,7 +51,7 @@ import {
   useValidateContentList,
 } from 'services/Content/ContentQueries';
 import { ContentOrigin, RepositoryParamsResponse } from 'services/Content/ContentApi';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import ConditionalTooltip from 'components/ConditionalTooltip/ConditionalTooltip';
 import { isEmpty, isEqual } from 'lodash';
 import useDeepCompareEffect from 'Hooks/useDeepCompareEffect';
@@ -110,7 +110,7 @@ const AddContent = ({ isEdit = false }: Props) => {
     }
   }, [isLoadingInitialContent, isSuccess]);
 
-  const { mutateAsync: editContent, isLoading: isEditing } = useEditContentQuery(
+  const { mutateAsync: editContent, isPending: isEditing } = useEditContentQuery(
     mapFormikToAPIValues(values),
   );
 
@@ -141,7 +141,7 @@ const AddContent = ({ isEdit = false }: Props) => {
   const { fetchGpgKey, isLoading: isFetchingGpgKey } = useFetchGpgKey();
 
   const { distribution_arches: distArches = [], distribution_versions: distVersions = [] } =
-    queryClient.getQueryData<RepositoryParamsResponse>(REPOSITORY_PARAMS_KEY) || {};
+    queryClient.getQueryData<RepositoryParamsResponse>([REPOSITORY_PARAMS_KEY]) || {};
 
   const { distributionArches, distributionVersions } = useMemo(() => {
     const distributionArches = {};
@@ -172,7 +172,7 @@ const AddContent = ({ isEdit = false }: Props) => {
     }
   };
 
-  const { mutateAsync: addContent, isLoading: isAdding } = useAddContentQuery([
+  const { mutateAsync: addContent, isPending: isAdding } = useAddContentQuery([
     mapFormikToAPIValues(values),
   ]);
 
@@ -213,7 +213,7 @@ const AddContent = ({ isEdit = false }: Props) => {
   const {
     mutateAsync: validateContent,
     data: validationList,
-    isLoading: isValidating,
+    isPending: isValidating,
   } = useValidateContentList();
 
   useEffect(() => {

src/Pages/Repositories/ContentListTable/components/DeleteContentModal/DeleteContent.test.tsx

@@ -11,8 +11,8 @@ import { ContentOrigin } from 'services/Content/ContentApi';
 import { DELETE_ROUTE } from 'Routes/constants';
 import { useTemplateList } from 'services/Templates/TemplateQueries';
 
-jest.mock('react-query', () => ({
-  ...jest.requireActual('react-query'),
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
 

src/Pages/Repositories/ContentListTable/components/DeleteContentModal/DeleteContentModal.tsx

@@ -25,7 +25,7 @@ import {
   useBulkDeleteContentItemMutate,
   useContentListQuery,
 } from 'services/Content/ContentQueries';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useHref, useLocation, useNavigate } from 'react-router-dom';
 import { useContentListOutletContext } from '../../ContentListTable';
 import useRootPath from 'Hooks/useRootPath';
@@ -67,7 +67,6 @@ export default function DeleteContentModal() {
   const rootPath = useRootPath();
   const queryClient = useQueryClient();
   const { search } = useLocation();
-  const [isLoading, setIsLoading] = useState(true);
   const maxTemplatesToShow = 3;
   const [expandState, setExpandState] = useState({});
 
@@ -98,13 +97,14 @@ export default function DeleteContentModal() {
   const {
     isError: isRepoError,
     data: repos = { data: [] as ContentItem[], meta: { count: 0, limit: 20, offset: 0 } },
+    isLoading: isRepoLoading,
   } = useContentListQuery(selectedPage, selectedPerPage, repoFilterData, '', [
     ContentOrigin.CUSTOM,
   ]);
 
   const reposToDelete = new Map(repos.data.map((repo) => [repo.uuid, repo]));
 
-  const { mutateAsync: deleteItems, isLoading: isDeletingItems } = useBulkDeleteContentItemMutate(
+  const { mutateAsync: deleteItems, isPending: isDeletingItems } = useBulkDeleteContentItemMutate(
     queryClient,
     reposToDelete,
     page,
@@ -120,8 +120,8 @@ export default function DeleteContentModal() {
     deleteItems(reposToDelete).then(() => {
       onClose();
       clearCheckedRepositories();
-      queryClient.invalidateQueries(CONTENT_LIST_KEY);
-      queryClient.invalidateQueries(GET_TEMPLATES_KEY);
+      queryClient.invalidateQueries({ queryKey: [CONTENT_LIST_KEY] });
+      queryClient.invalidateQueries({ queryKey: [GET_TEMPLATES_KEY] });
     });
   };
 
@@ -136,17 +136,16 @@ export default function DeleteContentModal() {
   const {
     isError: isTemplateError,
     data: templates = { data: [], meta: { count: 0, limit: 20, offset: 0 } },
+    isLoading: isTemplateLoading,
   } = useTemplateList(page, perPage, '', templateFilterData);
 
   useEffect(() => {
-    if (repos && templates) {
-      setIsLoading(false);
-    }
     if (isRepoError || isTemplateError) {
       onClose();
     }
-  }, [isRepoError, isTemplateError, repos.data, templates.data]);
+  }, [isRepoError, isTemplateError]);
 
+  const isLoading = isRepoLoading || isTemplateLoading;
   const actionTakingPlace = isDeletingItems || isLoading;
 
   const columnHeaders = ['Name', 'URL', 'Associated templates'];

src/Pages/Repositories/ContentListTable/components/SnapshotListModal/DeleteSnapshotsModal/DeleteSnapshotsModal.test.tsx

@@ -12,8 +12,8 @@ import { useGetSnapshotList } from 'services/Content/ContentQueries';
 import { useFetchTemplatesForSnapshots } from 'services/Templates/TemplateQueries';
 import { formatDateDDMMMYYYY } from 'helpers';
 
-jest.mock('react-query', () => ({
-  ...jest.requireActual('react-query'),
+jest.mock('@tanstack/react-query', () => ({
+  ...jest.requireActual('@tanstack/react-query'),
   useQueryClient: jest.fn(),
 }));
 

src/Pages/Repositories/ContentListTable/components/SnapshotListModal/DeleteSnapshotsModal/DeleteSnapshotsModal.tsx

@@ -21,7 +21,7 @@ import { Table, Tbody, Td, Th, Thead, Tr } from '@patternfly/react-table';
 import { useEffect, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import Hide from 'components/Hide/Hide';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useHref, useLocation, useNavigate, useParams } from 'react-router-dom';
 import { useSnapshotListOutletContext } from '../SnapshotListModal';
 import useRootPath from 'Hooks/useRootPath';
@@ -81,7 +81,7 @@ export default function DeleteSnapshotsModal() {
       : [];
   const snapshotsToDelete = new Set(uuids);
 
-  const { mutateAsync: deleteSnapshots, isLoading: isDeletingSnapshots } =
+  const { mutateAsync: deleteSnapshots, isPending: isDeletingSnapshots } =
     useBulkDeleteSnapshotsMutate(queryClient, uuid, snapshotsToDelete);
 
   const onClose = () => navigate(`${rootPath}/${REPOSITORIES_ROUTE}/${uuid}/snapshots`);