refactor: [M3-7440] - Upgrade to TanStack Query v4 (#10236)

* initial refactor

* update

* Added changeset: Upgrade to TanStack Query v4

* fix: linode backups render order bug

* try to fix test flake in `EditAPITokenDrawer.test.tsx`

* try to fix test flake in `EditAPITokenDrawer.test.tsx`

* fix: dbaas query keys and show button

* fix: obj file upload (we must create new object)

* revert clean up to prevent breaking changes

* specify the exact react query version

---------

Co-authored-by: Banks Nussman <banks@nussman.us>

packages/manager/.changeset/pr-10236-tech-stories-1709140341110.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Upgrade to TanStack Query v4 ([#10236](https://github.com/linode/manager/pull/10236))

packages/manager/package.json

@@ -23,6 +23,8 @@
     "@paypal/react-paypal-js": "^7.8.3",
     "@reach/tabs": "^0.10.5",
     "@sentry/react": "^7.57.0",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
     "algoliasearch": "^4.14.3",
     "axios": "~1.6.5",
     "braintree-web": "^3.92.2",
@@ -55,7 +57,6 @@
     "react-dom": "^18.2.0",
     "react-dropzone": "~11.2.0",
     "react-number-format": "^3.5.0",
-    "react-query": "^3.3.2",
     "react-redux": "~7.1.3",
     "react-router-dom": "~5.3.4",
     "react-router-hash-link": "^2.3.1",

packages/manager/src/components/PaymentMethodRow/PaymentMethodRow.tsx

@@ -3,7 +3,7 @@ import { PaymentMethod } from '@linode/api-v4/lib/account/types';
 import { useTheme } from '@mui/material/styles';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useHistory } from 'react-router-dom';
 
 import { Action, ActionMenu } from 'src/components/ActionMenu/ActionMenu';
@@ -48,7 +48,7 @@ export const PaymentMethodRow = (props: Props) => {
 
   const makeDefault = (id: number) => {
     makeDefaultPaymentMethod(id)
-      .then(() => queryClient.invalidateQueries(`${queryKey}-all`))
+      .then(() => queryClient.invalidateQueries([`${queryKey}-all`]))
       .catch((errors) =>
         enqueueSnackbar(
           errors[0]?.reason || 'Unable to change your default payment method.',

packages/manager/src/components/TagCell/AddTag.tsx

@@ -1,6 +1,6 @@
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Select, { Item } from 'src/components/EnhancedSelect/Select';
 import { useProfile } from 'src/queries/profile';

packages/manager/src/components/TagsInput/TagsInput.tsx

@@ -1,7 +1,7 @@
 import { APIError } from '@linode/api-v4/lib/types';
 import { concat } from 'ramda';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import Select, {
   Item,

packages/manager/src/components/TagsPanel/TagsPanel.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import {
   StyledPlusIcon,

packages/manager/src/components/Uploaders/ImageUploader/ImageUploader.tsx

@@ -3,7 +3,7 @@ import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { flushSync } from 'react-dom';
 import { FileRejection, useDropzone } from 'react-dropzone';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
@@ -234,7 +234,7 @@ export const ImageUploader = React.memo((props: ImageUploaderProps) => {
             redirectToLogin('/images');
           }, 3000);
         } else {
-          queryClient.invalidateQueries(`${queryKey}-list`);
+          queryClient.invalidateQueries([`${queryKey}-list`]);
           history.push('/images');
         }
       };

packages/manager/src/components/Uploaders/ObjectUploader/ObjectUploader.tsx

@@ -3,7 +3,7 @@ import { AxiosProgressEvent } from 'axios';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import { FileRejection, useDropzone } from 'react-dropzone';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { debounce } from 'throttle-debounce';
 
 import { Button } from 'src/components/Button/Button';

packages/manager/src/containers/account.container.ts

@@ -1,7 +1,7 @@
 import { Account } from '@linode/api-v4/lib';
 import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 
 import { useAccount } from 'src/queries/account';
 

packages/manager/src/containers/accountSettings.container.ts

@@ -1,7 +1,7 @@
 import { AccountSettings } from '@linode/api-v4/lib';
 import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 
 import { useAccountSettings } from 'src/queries/accountSettings';
 

packages/manager/src/containers/profile.container.ts

@@ -1,7 +1,7 @@
 import { Grants, Profile } from '@linode/api-v4/lib';
 import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 
 import { useGrants, useProfile } from 'src/queries/profile';
 

packages/manager/src/containers/withQueryClient.container.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { QueryClient, useQueryClient } from 'react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 
 export interface WithQueryClientProps {
   queryClient: QueryClient;

packages/manager/src/features/Account/Agreements/withAgreements.ts

@@ -1,7 +1,7 @@
 import { Agreements } from '@linode/api-v4/lib';
 import { APIError } from '@linode/api-v4/lib/types';
 import * as React from 'react';
-import { UseQueryResult } from 'react-query';
+import { UseQueryResult } from '@tanstack/react-query';
 
 import { useAccountAgreements } from 'src/queries/accountAgreements';
 

packages/manager/src/features/Account/EnableManaged.tsx

@@ -2,7 +2,7 @@ import { enableManaged } from '@linode/api-v4/lib/managed';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { Accordion } from 'src/components/Accordion';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';

packages/manager/src/features/Account/EnableObjectStorage.tsx

@@ -3,7 +3,7 @@ import { cancelObjectStorage } from '@linode/api-v4/lib/object-storage';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { Accordion } from 'src/components/Accordion';
 import { Button } from 'src/components/Button/Button';
@@ -89,8 +89,8 @@ export const EnableObjectStorage = (props: Props) => {
       .then(() => {
         updateAccountSettingsData({ object_storage: 'disabled' }, queryClient);
         handleClose();
-        queryClient.invalidateQueries(`${queryKey}-buckets`);
-        queryClient.invalidateQueries(`${queryKey}-access-keys`);
+        queryClient.invalidateQueries([`${queryKey}-buckets`]);
+        queryClient.invalidateQueries([`${queryKey}-access-keys`]);
       })
       .catch(handleError);
   };

packages/manager/src/features/Account/SwitchAccounts/ChildAccountList.tsx

@@ -1,6 +1,6 @@
 import _ from 'lodash';
 import React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { Waypoint } from 'react-waypoint';
 
 import ErrorStateCloud from 'src/assets/icons/error-state-cloud.svg';

packages/manager/src/features/Backups/utils.ts

@@ -1,5 +1,5 @@
 import { enableBackups } from '@linode/api-v4';
-import { useMutation, useQueryClient } from 'react-query';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { queryKey } from 'src/queries/linodes/linodes';
 import { pluralize } from 'src/utilities/pluralize';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/GooglePayButton.tsx

@@ -2,7 +2,7 @@ import { APIWarning } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Theme } from '@mui/material/styles';
 import * as React from 'react';
-import { QueryClient, useQueryClient } from 'react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import GooglePayIcon from 'src/assets/icons/payment/gPayButton.svg';

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PayPalButton.tsx

@@ -10,7 +10,7 @@ import {
   usePayPalScriptReducer,
 } from '@paypal/react-paypal-js';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -179,7 +179,7 @@ export const PayPalButton = (props: Props) => {
         setProcessing(false);
       });
       if (response) {
-        queryClient.invalidateQueries(`${accountBillingKey}-payments`);
+        queryClient.invalidateQueries([`${accountBillingKey}-payments`]);
 
         setSuccess(
           `Payment for $${response.usd} successfully submitted with PayPal`,

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PaymentDrawer/PaymentDrawer.tsx

@@ -4,7 +4,7 @@ import { APIWarning } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import { Button } from 'src/components/Button/Button';
@@ -189,7 +189,7 @@ export const PaymentDrawer = (props: Props) => {
           true,
           response.warnings
         );
-        queryClient.invalidateQueries(`${queryKey}-payments`);
+        queryClient.invalidateQueries([`${queryKey}-payments`]);
       })
       .catch((errorResponse) => {
         setSubmitting(false);

packages/manager/src/features/Billing/BillingPanels/BillingSummary/PromoDialog.tsx

@@ -2,7 +2,7 @@ import { addPromotion } from '@linode/api-v4/lib';
 import { APIError } from '@linode/api-v4/lib/types';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -51,7 +51,7 @@ const PromoDialog = (props: Props) => {
         enqueueSnackbar('Successfully applied promo to your account.', {
           variant: 'success',
         });
-        queryClient.invalidateQueries(queryKey);
+        queryClient.invalidateQueries([queryKey]);
         onClose();
       })
       .catch((error: APIError[]) => {

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/AddPaymentMethodDrawer/AddCreditCardForm.tsx

@@ -7,7 +7,7 @@ import { useFormik, yupToFormErrors } from 'formik';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
 import NumberFormat, { NumberFormatProps } from 'react-number-format';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
@@ -81,7 +81,7 @@ const AddCreditCardForm = (props: Props) => {
       enqueueSnackbar('Successfully added Credit Card', {
         variant: 'success',
       });
-      queryClient.invalidateQueries('account-payment-methods-all');
+      queryClient.invalidateQueries(['account-payment-methods-all']);
       onClose();
     } catch (errors) {
       handleAPIErrors(errors, setFieldError, setError);

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/GooglePayChip.tsx

@@ -1,6 +1,6 @@
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import GooglePayIcon from 'src/assets/icons/payment/googlePay.svg';

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PayPalChip.tsx

@@ -11,7 +11,7 @@ import {
 } from '@paypal/react-paypal-js';
 import { useSnackbar } from 'notistack';
 import React, { useEffect } from 'react';
-import { QueryClient, useQueryClient } from 'react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { makeStyles } from 'tss-react/mui';
 
 import { CircleProgress } from 'src/components/CircleProgress';
@@ -115,7 +115,7 @@ export const PayPalChip = (props: Props) => {
       type: 'payment_method_nonce',
     })
       .then(() => {
-        queryClient.invalidateQueries(`${accountPaymentKey}-all`);
+        queryClient.invalidateQueries([`${accountPaymentKey}-all`]);
 
         onClose();
 

packages/manager/src/features/Billing/BillingPanels/PaymentInfoPanel/PaymentInformation.tsx

@@ -2,7 +2,7 @@ import { PaymentMethod, deletePaymentMethod } from '@linode/api-v4/lib/account';
 import { APIError } from '@linode/api-v4/lib/types';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useHistory, useRouteMatch } from 'react-router-dom';
 
 import { DeletePaymentMethodDialog } from 'src/components/PaymentMethodRow/DeletePaymentMethodDialog';
@@ -63,7 +63,7 @@ const PaymentInformation = (props: Props) => {
       .then(() => {
         setDeleteLoading(false);
         closeDeleteDialog();
-        queryClient.invalidateQueries(`${queryKey}-all`);
+        queryClient.invalidateQueries([`${queryKey}-all`]);
       })
       .catch((e: APIError[]) => {
         setDeleteLoading(false);

packages/manager/src/features/Billing/GooglePayProvider.ts

@@ -5,7 +5,7 @@ import {
 import { APIWarning } from '@linode/api-v4/lib/types';
 import braintree, { GooglePayment } from 'braintree-web';
 import { VariantType } from 'notistack';
-import { QueryClient } from 'react-query';
+import { QueryClient } from '@tanstack/react-query';
 
 import { GPAY_CLIENT_ENV, GPAY_MERCHANT_ID } from 'src/constants';
 import { reportException } from 'src/exceptionReporting';
@@ -116,7 +116,7 @@ export const gPay = async (
       nonce,
       usd: transactionInfo.totalPrice as string,
     });
-    queryClient.invalidateQueries(`${accountBillingKey}-payments`);
+    queryClient.invalidateQueries([`${accountBillingKey}-payments`]);
     const message = {
       text: `Payment for $${transactionInfo.totalPrice} successfully submitted with Google Pay`,
       variant: 'success' as VariantType,
@@ -130,7 +130,7 @@ export const gPay = async (
       is_default: true,
       type: 'payment_method_nonce',
     });
-    queryClient.invalidateQueries(`${accountPaymentKey}-all`);
+    queryClient.invalidateQueries([`${accountPaymentKey}-all`]);
     setMessage({
       text: 'Successfully added Google Pay',
       variant: 'success',

packages/manager/src/features/Databases/DatabaseDetail/DatabaseSummary/DatabaseSummaryConnectionDetails.tsx

@@ -242,7 +242,7 @@ export const DatabaseSummaryConnectionDetails = (props: Props) => {
           <Typography>
             <span>password</span> = {password}
           </Typography>
-          {credentialsLoading ? (
+          {showCredentials && credentialsLoading ? (
             <div className={classes.progressCtn}>
               <CircleProgress mini noPadding size={12} />
             </div>

packages/manager/src/features/EntityTransfers/EntityTransfersCreate/EntityTransfersCreate.tsx

@@ -2,7 +2,7 @@ import { CreateTransferPayload } from '@linode/api-v4/lib/entity-transfers';
 import Grid from '@mui/material/Unstable_Grid2';
 import { curry } from 'ramda';
 import * as React from 'react';
-import { QueryClient, useQueryClient } from 'react-query';
+import { QueryClient, useQueryClient } from '@tanstack/react-query';
 import { useHistory } from 'react-router-dom';
 
 import { DocumentTitleSegment } from 'src/components/DocumentTitle';
@@ -70,7 +70,7 @@ export const EntityTransfersCreate = () => {
         const entityCount = countByEntity(transfer.entities);
         sendEntityTransferCreateEvent(entityCount);
 
-        queryClient.invalidateQueries(queryKey);
+        queryClient.invalidateQueries([queryKey]);
         push({ pathname: '/account/service-transfers', state: { transfer } });
       },
     }).catch((_) => null);

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferCancelDialog.tsx

@@ -5,7 +5,7 @@ import {
 import { APIError } from '@linode/api-v4/lib/types';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
@@ -55,7 +55,7 @@ export const ConfirmTransferCancelDialog = React.memo((props: Props) => {
         sendEntityTransferCancelEvent();
 
         // Refresh the query for Entity Transfers.
-        queryClient.invalidateQueries(queryKey);
+        queryClient.invalidateQueries([queryKey]);
 
         onClose();
         setSubmitting(false);

packages/manager/src/features/EntityTransfers/EntityTransfersLanding/ConfirmTransferDialog.tsx

@@ -5,7 +5,7 @@ import {
 import { APIError } from '@linode/api-v4/lib/types';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 
 import { Checkbox } from 'src/components/Checkbox';
 import { CircleProgress } from 'src/components/CircleProgress';

packages/manager/src/features/Firewalls/FirewallDetail/Devices/AddNodebalancerDrawer.tsx

@@ -2,7 +2,7 @@ import { NodeBalancer } from '@linode/api-v4';
 import { useTheme } from '@mui/material';
 import { useSnackbar } from 'notistack';
 import * as React from 'react';
-import { useQueryClient } from 'react-query';
+import { useQueryClient } from '@tanstack/react-query';
 import { useParams } from 'react-router-dom';
 import sanitize from 'sanitize-html';