refactor: [M3-8208] - Query Key Factory for Linodes (linode#10659)

* start refactor * save progress * finish refactor * improve linode stats flickering * remove one-off VPC related invalidations * clean up * fix up unit test * fix ip sharing bug * Added changeset: Query Key Factory for Linodes --------- Co-authored-by: Banks Nussman <[email protected]>
pmakode-akamai · Jul 17, 2024 · 23d50b6 · 23d50b6
1 parent e60faef
commit 23d50b6
Show file tree

Hide file tree

Showing 34 changed files with 974 additions and 1,043 deletions.
diff --git a/packages/manager/.changeset/pr-10659-tech-stories-1720536986552.md b/packages/manager/.changeset/pr-10659-tech-stories-1720536986552.md
@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Query Key Factory for Linodes ([#10659](https://github.com/linode/manager/pull/10659))
diff --git a/packages/manager/src/features/Backups/utils.ts b/packages/manager/src/features/Backups/utils.ts
@@ -1,7 +1,7 @@
 import { enableBackups } from '@linode/api-v4';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import { queryKey } from 'src/queries/linodes/linodes';
+import { linodeQueries } from 'src/queries/linodes/linodes';
 import { pluralize } from 'src/utilities/pluralize';
 
 import type { APIError, Linode } from '@linode/api-v4';
@@ -30,22 +30,15 @@ export const useEnableBackupsOnLinodesMutation = () => {
     },
     {
       onSuccess(_, variables) {
-        queryClient.invalidateQueries([queryKey, 'paginated']);
-        queryClient.invalidateQueries([queryKey, 'all']);
-        queryClient.invalidateQueries([queryKey, 'infinite']);
+        queryClient.invalidateQueries(linodeQueries.linodes);
         for (const linode of variables) {
-          queryClient.invalidateQueries([
-            queryKey,
-            'linode',
-            linode.id,
-            'details',
-          ]);
-          queryClient.invalidateQueries([
-            queryKey,
-            'linode',
-            linode.id,
-            'backups',
-          ]);
+          queryClient.invalidateQueries({
+            exact: true,
+            queryKey: linodeQueries.linode(linode.id).queryKey,
+          });
+          queryClient.invalidateQueries({
+            queryKey: linodeQueries.linode(linode.id)._ctx.backups.queryKey,
+          });
         }
       },
     }

diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Devices/RemoveDeviceDialog.tsx
@@ -6,7 +6,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { Typography } from 'src/components/Typography';
 import { useRemoveFirewallDeviceMutation } from 'src/queries/firewalls';
-import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
+import { linodeQueries } from 'src/queries/linodes/linodes';
 import { nodebalancerQueries } from 'src/queries/nodebalancers';
 
 import type { FirewallDevice } from '@linode/api-v4';
@@ -57,7 +57,8 @@ export const RemoveDeviceDialog = React.memo((props: Props) => {
     // Since the linode was removed as a device, invalidate the linode-specific firewall query
     if (deviceType === 'linode') {
       queryClient.invalidateQueries({
-        queryKey: [linodesQueryKey, deviceType, device.entity.id, 'firewalls'],
+        queryKey: linodeQueries.linode(device.entity.id)._ctx.firewalls
+          .queryKey,
       });
     }
 

diff --git a/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx b/packages/manager/src/features/Firewalls/FirewallDetail/Rules/FirewallRulesLanding.tsx
@@ -12,7 +12,7 @@ import {
   useAllFirewallDevicesQuery,
   useUpdateFirewallRulesMutation,
 } from 'src/queries/firewalls';
-import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
+import { linodeQueries } from 'src/queries/linodes/linodes';
 import { nodebalancerQueries } from 'src/queries/nodebalancers';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
@@ -206,12 +206,8 @@ export const FirewallRulesLanding = React.memo((props: Props) => {
           for (const device of devices) {
             if (device.entity.type === 'linode') {
               queryClient.invalidateQueries({
-                queryKey: [
-                  linodesQueryKey,
-                  device.entity.type,
-                  device.entity.id,
-                  'firewalls',
-                ],
+                queryKey: linodeQueries.linode(device.entity.id)._ctx.firewalls
+                  .queryKey,
               });
             }
             if (device.entity.type === 'nodebalancer') {

diff --git a/packages/manager/src/features/Firewalls/FirewallLanding/FirewallDialog.tsx b/packages/manager/src/features/Firewalls/FirewallLanding/FirewallDialog.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { ConfirmationDialog } from 'src/components/ConfirmationDialog/ConfirmationDialog';
 import { useDeleteFirewall, useMutateFirewall } from 'src/queries/firewalls';
-import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
+import { linodeQueries } from 'src/queries/linodes/linodes';
 import { nodebalancerQueries } from 'src/queries/nodebalancers';
 import { capitalize } from 'src/utilities/capitalize';
 
@@ -69,7 +69,7 @@ export const FirewallDialog = React.memo((props: Props) => {
 
       if (entity.type === 'linode') {
         queryClient.invalidateQueries({
-          queryKey: [linodesQueryKey, 'linode', entity.id, 'firewalls'],
+          queryKey: linodeQueries.linode(entity.id)._ctx.firewalls.queryKey,
         });
       }
     }

diff --git a/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx b/packages/manager/src/features/Linodes/LinodeEntityDetailHeader.tsx
@@ -1,8 +1,5 @@
-import { Config } from '@linode/api-v4/lib';
-import { LinodeBackups } from '@linode/api-v4/lib/linodes';
 import { Typography } from '@mui/material';
 import { useTheme } from '@mui/material/styles';
-import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
 import { Box } from 'src/components/Box';
@@ -12,20 +9,20 @@ import { Hidden } from 'src/components/Hidden';
 import { Stack } from 'src/components/Stack';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
 import { TooltipIcon } from 'src/components/TooltipIcon';
-import { TypographyProps } from 'src/components/Typography';
 import { LinodeActionMenu } from 'src/features/Linodes/LinodesLanding/LinodeActionMenu/LinodeActionMenu';
 import { ProgressDisplay } from 'src/features/Linodes/LinodesLanding/LinodeRow/LinodeRow';
 import { lishLaunch } from 'src/features/Lish/lishUtils';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
-import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
 import { sendLinodeActionMenuItemEvent } from 'src/utilities/analytics/customEventAnalytics';
 
 import { VPC_REBOOT_MESSAGE } from '../VPCs/constants';
 import { StyledLink } from './LinodeEntityDetail.styles';
-import { LinodeHandlers } from './LinodesLanding/LinodesLanding';
 import { getLinodeIconStatus } from './LinodesLanding/utils';
 
+import type { LinodeHandlers } from './LinodesLanding/LinodesLanding';
+import type { Config, LinodeBackups } from '@linode/api-v4';
 import type { Linode, LinodeType } from '@linode/api-v4/lib/linodes/types';
+import type { TypographyProps } from 'src/components/Typography';
 
 interface LinodeEntityDetailProps {
   id: number;
@@ -67,7 +64,6 @@ export const LinodeEntityDetailHeader = (
   props: LinodeEntityDetailHeaderProps
 ) => {
   const theme = useTheme();
-  const queryClient = useQueryClient();
 
   const {
     backups,
@@ -108,19 +104,6 @@ export const LinodeEntityDetailHeader = (
       )
     );
 
-  // If the Linode is running, we want to check the active status of its interfaces to determine whether it needs to
-  // be rebooted or not. So, we need to invalidate the linode configs query to get the most up to date information.
-  React.useEffect(() => {
-    if (isRunning) {
-      queryClient.invalidateQueries([
-        linodesQueryKey,
-        'linode',
-        linodeId,
-        'configs',
-      ]);
-    }
-  }, [linodeId, isRunning, queryClient]);
-
   const formattedStatus = isRebootNeeded
     ? 'REBOOT NEEDED'
     : linodeStatus.replace('_', ' ').toUpperCase();

diff --git a/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx b/packages/manager/src/features/Linodes/LinodesCreate/SelectLinodePanel/SelectLinodeRow.tsx
@@ -1,25 +1,24 @@
 import { useTheme } from '@mui/material';
-import { useQueryClient } from '@tanstack/react-query';
 import * as React from 'react';
 
 import { InlineMenuAction } from 'src/components/InlineMenuAction/InlineMenuAction';
-import { OrderByProps } from 'src/components/OrderBy';
 import { Radio } from 'src/components/Radio/Radio';
 import { StatusIcon } from 'src/components/StatusIcon/StatusIcon';
-import { TableCell, TableCellProps } from 'src/components/TableCell';
+import { TableCell } from 'src/components/TableCell';
 import { TableRow } from 'src/components/TableRow';
 import { TableSortCell } from 'src/components/TableSortCell';
 import { getLinodeIconStatus } from 'src/features/Linodes/LinodesLanding/utils';
 import { useIsResourceRestricted } from 'src/hooks/useIsResourceRestricted';
 import { useImageQuery } from 'src/queries/images';
-import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
 import { useTypeQuery } from 'src/queries/types';
 import { capitalizeAllWords } from 'src/utilities/capitalize';
 import { formatStorageUnits } from 'src/utilities/formatStorageUnits';
 
 import { RegionIndicator } from '../../LinodesLanding/RegionIndicator';
 
 import type { Linode } from '@linode/api-v4/lib/linodes/types';
+import type { OrderByProps } from 'src/components/OrderBy';
+import type { TableCellProps } from 'src/components/TableCell';
 
 interface Props {
   disabled?: boolean;
@@ -31,7 +30,6 @@ interface Props {
 }
 
 export const SelectLinodeRow = (props: Props) => {
-  const queryClient = useQueryClient();
   const {
     disabled,
     handlePowerOff,
@@ -61,19 +59,6 @@ export const SelectLinodeRow = (props: Props) => {
 
   const isDisabled = disabled || isLinodesGrantReadOnly;
 
-  // If the Linode's status is running, we want to check if its interfaces associated with this subnet have become active so
-  // that we can determine if it needs a reboot or not. So, we need to invalidate the linode configs query to get the most up to date information.
-  React.useEffect(() => {
-    if (linode && linode.status === 'running') {
-      queryClient.invalidateQueries([
-        linodesQueryKey,
-        'linode',
-        linode.id,
-        'configs',
-      ]);
-    }
-  }, [linode, queryClient]);
-
   const iconStatus = getLinodeIconStatus(linode.status);
   const isRunning = linode.status == 'running';
 

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/AddIPDrawer.tsx
@@ -1,12 +1,10 @@
-import { IPv6Prefix } from '@linode/api-v4/lib/networking';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { Box } from 'src/components/Box';
 import { Divider } from 'src/components/Divider';
 import { Drawer } from 'src/components/Drawer';
-import { Item } from 'src/components/EnhancedSelect/Select';
 import { FormControlLabel } from 'src/components/FormControlLabel';
 import { Link } from 'src/components/Link';
 import { Notice } from 'src/components/Notice/Notice';
@@ -17,9 +15,12 @@ import { Tooltip } from 'src/components/Tooltip';
 import { Typography } from 'src/components/Typography';
 import {
   useAllocateIPMutation,
-  useCreateIPv6RangeMutation,
   useLinodeIPsQuery,
 } from 'src/queries/linodes/networking';
+import { useCreateIPv6RangeMutation } from 'src/queries/networking/networking';
+
+import type { IPv6Prefix } from '@linode/api-v4/lib/networking';
+import type { Item } from 'src/components/EnhancedSelect/Select';
 
 type IPType = 'v4Private' | 'v4Public';
 

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/EditRangeRDNSDrawer.tsx
@@ -1,4 +1,3 @@
-import { IPRange } from '@linode/api-v4/lib/networking';
 import { useTheme } from '@mui/material/styles';
 import { useFormik } from 'formik';
 import { useSnackbar } from 'notistack';
@@ -10,14 +9,14 @@ import { Notice } from 'src/components/Notice/Notice';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
-import {
-  useAllIPsQuery,
-  useLinodeIPMutation,
-} from 'src/queries/linodes/networking';
+import { useLinodeIPMutation } from 'src/queries/linodes/networking';
+import { useAllIPsQuery } from 'src/queries/networking/networking';
 import { getErrorMap } from 'src/utilities/errorUtils';
 
 import { listIPv6InRange } from './LinodeIPAddressRow';
 
+import type { IPRange } from '@linode/api-v4';
+
 interface Props {
   linodeId: number;
   onClose: () => void;

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPSharing.tsx
@@ -23,10 +23,10 @@ import {
   useLinodeQuery,
 } from 'src/queries/linodes/linodes';
 import {
-  useAllDetailedIPv6RangesQuery,
   useLinodeIPsQuery,
   useLinodeShareIPMutation,
 } from 'src/queries/linodes/networking';
+import { useAllDetailedIPv6RangesQuery } from 'src/queries/networking/networking';
 import { areArraysEqual } from 'src/utilities/areArraysEqual';
 import { getAPIErrorOrDefault, getErrorMap } from 'src/utilities/errorUtils';
 

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/IPTransfer.tsx
@@ -1,7 +1,5 @@
-import { IPRange } from '@linode/api-v4/lib/networking';
-import { APIError } from '@linode/api-v4/lib/types';
-import Grid from '@mui/material/Unstable_Grid2';
 import { styled, useTheme } from '@mui/material/styles';
+import Grid from '@mui/material/Unstable_Grid2';
 import {
   both,
   compose,
@@ -21,7 +19,7 @@ import { ActionsPanel } from 'src/components/ActionsPanel/ActionsPanel';
 import { CircleProgress } from 'src/components/CircleProgress';
 import { Dialog } from 'src/components/Dialog/Dialog';
 import { Divider } from 'src/components/Divider';
-import Select, { Item } from 'src/components/EnhancedSelect/Select';
+import Select from 'src/components/EnhancedSelect/Select';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
 import { usePrevious } from 'src/hooks/usePrevious';
@@ -30,12 +28,15 @@ import {
   useLinodeQuery,
 } from 'src/queries/linodes/linodes';
 import {
-  useAllIPv6RangesQuery,
   useAssignAdressesMutation,
   useLinodeIPsQuery,
 } from 'src/queries/linodes/networking';
+import { useAllIPv6RangesQuery } from 'src/queries/networking/networking';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 
+import type { APIError, IPRange } from '@linode/api-v4';
+import type { Item } from 'src/components/EnhancedSelect/Select';
+
 interface Props {
   linodeId: number;
   onClose: () => void;

diff --git a/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx b/packages/manager/src/features/Linodes/LinodesDetail/LinodeNetworking/LinodeIPAddressRow.tsx
@@ -9,10 +9,8 @@ import { TableCell } from 'src/components/TableCell';
 import { Typography } from 'src/components/Typography';
 import { StyledTableRow } from 'src/features/Linodes/LinodeEntityDetail.styles';
 import { useLinodeQuery } from 'src/queries/linodes/linodes';
-import {
-  useAllIPsQuery,
-  useLinodeIPsQuery,
-} from 'src/queries/linodes/networking';
+import { useLinodeIPsQuery } from 'src/queries/linodes/networking';
+import { useAllIPsQuery } from 'src/queries/networking/networking';
 
 import { LinodeNetworkingActionMenu } from './LinodeNetworkingActionMenu';