feat(HMS-2444): migrate to react-query v4

config/jest.setup.js

@@ -1,6 +1,6 @@
 import '@testing-library/jest-dom/extend-expect';
 import { server } from '../src/mocks/server';
-import { QueryCache } from 'react-query';
+import { QueryCache } from '@tanstack/react-query';
 
 const queryCache = new QueryCache();
 

package.json

@@ -25,12 +25,12 @@
     "@patternfly/react-core": "4.276.11",
     "@redhat-cloud-services/frontend-components": "3.11.2",
     "@redhat-cloud-services/frontend-components-utilities": "3.7.4",
+    "@tanstack/react-query": "^4.33.0",
     "@unleash/proxy-client-react": "^3.5.2",
     "axios": "1.4.0",
     "classnames": "^2.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
-    "react-query": "^3.39.2",
     "react-tracked": "^1.7.10",
     "uuid": "^9.0.0"
   },

src/API/queryKeys.js

@@ -1,6 +1,6 @@
 export const SOURCES_QUERY_KEY = 'sources';
 export const SOURCE_UPLOAD_INFO_KEY = 'source_upload_info';
-export const PUBKEYS_QUERY_KEY = 'pubkeys';
+export const PUBKEYS_QUERY_KEY = ['pubkeys'];
 export const instanceTypesQueryKeys = (region) => ['instanceTypes', region];
 export const IMAGE_REGIONS_KEY = 'image_region';
 export const TEMPLATES_KEY = 'templates';

src/Components/Common/Hooks/sources.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useQuery, useQueries } from 'react-query';
+import { useQuery, useQueries } from '@tanstack/react-query';
 
 import { SOURCES_QUERY_KEY, SOURCE_UPLOAD_INFO_KEY } from '../../../API/queryKeys';
 import { fetchSourcesList, fetchSourceUploadInfo } from '../../../API';
@@ -8,7 +8,7 @@ import { AWS_PROVIDER, AZURE_PROVIDER, GCP_PROVIDER } from '../../../constants';
 export const useSourcesData = (provider, { refetch = false } = {}) => {
   const {
     error,
-    isLoading,
+    isInitialLoading: isLoading,
     data: sources,
   } = useQuery([SOURCES_QUERY_KEY, provider], () => fetchSourcesList(provider), {
     enabled: !!provider,
@@ -20,9 +20,13 @@ export const useSourcesData = (provider, { refetch = false } = {}) => {
 const useSourcesUploadInfos = (provider, { refetch }) => {
   const { sources, isLoading: isLoadingSources, error: sourcesError } = useSourcesData(provider, { refetch });
 
-  const uploadInfos = useQueries(
-    sources?.map((source) => ({ queryKey: [SOURCE_UPLOAD_INFO_KEY, source.id], queryFn: () => fetchSourceUploadInfo(source.id), retry: 1 })) || []
-  );
+  const queries =
+    sources?.map((source) => ({
+      queryKey: [SOURCE_UPLOAD_INFO_KEY, source.id],
+      queryFn: () => fetchSourceUploadInfo(source.id),
+      retry: 1,
+    })) || [];
+  const uploadInfos = useQueries({ queries });
 
   const isLoading = isLoadingSources || uploadInfos.some((info) => info.isLoading);
   const infos = [];
@@ -54,7 +58,7 @@ export const useSourcesForImage = (image, { refetch = false, onSuccess = () => {
     if (!isLoading && !error) {
       onSuccess(filteredSources);
     }
-  }, [isLoading]);
+  }, [isLoading, error]);
 
   return { isLoading, error, sources: filteredSources || [] };
 };

src/Components/Common/Query/index.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/prop-types */
 
 import React from 'react';
-import { QueryClient, QueryClientProvider } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
 const queryClient = new QueryClient({
   defaultOptions: {

src/Components/InstanceCounter/index.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, { useEffect } from 'react';
 import { NumberInput } from '@patternfly/react-core';
 import { useWizardContext } from '../Common/WizardContext';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { MAX_INSTANCES, MIN_INSTANCES, MAX_VCPU } from './constants';
 import { fetchInstanceTypesList } from '../../API';
 

src/Components/InstanceTypesSelect/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Spinner, Select, SelectOption, TextInput } from '@patternfly/react-core';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchInstanceTypesList } from '../../API';
 import { useWizardContext } from '../Common/WizardContext';
 
@@ -16,7 +16,7 @@ const InstanceTypesSelect = ({ setValidation, architecture }) => {
   const [prevSearch, setPrevSearch] = React.useState('');
   const [isTypeSupported, setTypeSupported] = React.useState(true);
   const {
-    isLoading,
+    isInitialLoading: isLoading,
     error,
     data: instanceTypes,
   } = useQuery(['instanceTypes', chosenRegion], () => fetchInstanceTypesList(chosenRegion, provider), {

src/Components/InstancesTable/index.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { ExternalLinkAltIcon } from '@patternfly/react-icons';
 import { Button, ClipboardCopy, Card, Pagination, Spinner, Bullseye } from '@patternfly/react-core';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { SSHUsername } from './helpers';
 import { instanceLink, humanizeInstanceID } from '../Common/instanceHelpers';

src/Components/LaunchDescriptionList/index.js

@@ -5,7 +5,7 @@ import { ExpandableSection, DescriptionList, DescriptionListTerm, DescriptionLis
 import { useSourcesData } from '../Common/Hooks/sources';
 import { useWizardContext } from '../Common/WizardContext';
 import { instanceType, region } from '../ProvisioningWizard/steps/ReservationProgress/helpers';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { fetchLaunchTemplates } from '../../API';
 import { humanizeProvider } from '../Common/helpers';
 import { TEMPLATES_KEY } from '../../API/queryKeys';

src/Components/ProvisioningWizard/ProvisioningWizard.test.js

@@ -36,7 +36,7 @@ describe('ProvisioningWizard', () => {
 
       render(<ProvisioningWizard image={{ ...awsImage, sourceIDs: ['1'] }} />);
       // wait for the sources to load
-      await screen.findByText('Launch image AWS image', { exact: false });
+      await screen.findByText('Select account', undefined, { timeout: 3000 });
 
       const sourceDropdown = await screen.findByText('Source 1');
       expect(sourceDropdown).toBeInTheDocument();

src/Components/ProvisioningWizard/steps/Pubkeys/PubkeySelect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Alert, Select, SelectOption, Spinner, FormGroup } from '@patternfly/react-core';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { PUBKEYS_QUERY_KEY } from '../../../../API/queryKeys';
 import { fetchPubkeysList } from '../../../../API';

src/Components/ProvisioningWizard/steps/Pubkeys/Pubkeys.test.js

@@ -27,6 +27,7 @@ describe('Pubkeys', () => {
         })
       );
       render(<Pubkeys setStepValidated={jest.fn()} />);
+      await screen.findByText('No SSH key found');
       const existingRadio = await screen.findByTestId('existing-pubkey-radio');
       expect(existingRadio).toBeDisabled();
     });

src/Components/ProvisioningWizard/steps/Pubkeys/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Form, FormGroup, Radio, Text, Title } from '@patternfly/react-core';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { useWizardContext } from '../../../Common/WizardContext';
 import PubkeySelect from './PubkeySelect';
 import NewSSHKeyForm from './NewKeyForm';

src/Components/ProvisioningWizard/steps/ReservationProgress/index.js

@@ -14,7 +14,7 @@ import {
   WizardContextConsumer,
 } from '@patternfly/react-core';
 import { CogsIcon, PendingIcon, CheckCircleIcon } from '@patternfly/react-icons';
-import { useMutation, useQuery } from 'react-query';
+import { useMutation, useQuery } from '@tanstack/react-query';
 
 import { useWizardContext } from '../../../Common/WizardContext';
 import { createNewPublicKey, createReservation, fetchReservation } from '../../../../API';

src/Components/RegionsSelect/index.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Alert, Select, SelectOption, Spinner } from '@patternfly/react-core';
-import { useQuery, useQueries } from 'react-query';
+import { useQuery, useQueries } from '@tanstack/react-query';
 
 import { AWS_PROVIDER, AZURE_PROVIDER, GCP_PROVIDER, MULTIPLE_REGION_SUPPORT } from '../../constants';
 import { IMAGE_REGIONS_KEY } from '../../API/queryKeys';
@@ -19,10 +19,13 @@ const RegionsSelect = ({ provider, currentRegion, composeID, onChange }) => {
     select: (images) => images.data?.map((image) => ({ id: image.id, region: image.request.region })),
   });
 
-  const clonesStatusQueries = useQueries(
-    clonedImages?.map((clonedImage) => ({ queryKey: [IMAGE_REGIONS_KEY, clonedImage.id], queryFn: () => fetchImageCloneStatus(clonedImage.id) })) ||
-      []
-  );
+  const queries =
+    clonedImages?.map((clonedImage) => ({
+      queryKey: [IMAGE_REGIONS_KEY, clonedImage.id],
+      queryFn: () => fetchImageCloneStatus(clonedImage.id),
+    })) || [];
+
+  const clonesStatusQueries = useQueries({ queries });
   const isCloneStatusLoading = clonesStatusQueries.some((clone) => clone.isLoading);
   const defaultRegion = { region: provider && defaultRegionByProvider(provider), id: composeID };
   const images = [defaultRegion];

src/Components/TemplateSelect/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Select, SelectOption, Spinner, HelperText, HelperTextItem } from '@patternfly/react-core';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 
 import { useWizardContext } from '../Common/WizardContext';
 import { fetchLaunchTemplates } from '../../API';
@@ -12,7 +12,7 @@ const TemplatesSelect = () => {
 
   const {
     error,
-    isLoading,
+    isInitialLoading: isLoading,
     data: templates,
   } = useQuery([TEMPLATES_KEY, `${chosenRegion}-${chosenSource}`], () => fetchLaunchTemplates(chosenSource, chosenRegion), {
     enabled: !!chosenSource && !!chosenRegion,

src/mocks/utils.js

@@ -2,17 +2,18 @@
 
 import React from 'react';
 import { render } from '@testing-library/react';
-import { QueryClient, QueryClientProvider, setLogger } from 'react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { WizardProvider } from '../Components/Common/WizardContext';
 
 const AllProviders = ({ children, provider, ...contextValues }) => {
-  setLogger({
-    log: console.log,
-    warn: console.warn,
-    // ✅ no more errors on the console
-    error: () => {},
+  const queryClient = new QueryClient({
+    logger: {
+      log: console.log,
+      warn: console.warn,
+      // ✅ no more errors on the console
+      error: () => {},
+    },
   });
-  const queryClient = new QueryClient();
 
   return (
     <WizardProvider provider={provider} {...contextValues}>