refactor: [M3-7437] - Use @lukemorales/query-key-factory for Profile Queries

packages/manager/.changeset/pr-10241-tech-stories-1709241014115.md

@@ -0,0 +1,5 @@
+---
+"@linode/manager": Tech Stories
+---
+
+Use `@lukemorales/query-key-factory` for Profile Queries ([#10241](https://github.com/linode/manager/pull/10241))

packages/manager/package.json

@@ -18,6 +18,7 @@
     "@emotion/styled": "^11.11.0",
     "@linode/api-v4": "*",
     "@linode/validation": "*",
+    "@lukemorales/query-key-factory": "^1.3.4",
     "@mui/icons-material": "^5.14.7",
     "@mui/material": "^5.14.7",
     "@paypal/react-paypal-js": "^7.8.3",

packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx

@@ -12,7 +12,7 @@ import { LinkButton } from 'src/components/LinkButton';
 import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import {
-  queryKey,
+  profileQueries,
   updateProfileData,
   useProfile,
   useSendPhoneVerificationCodeMutation,
@@ -98,7 +98,7 @@ export const PhoneVerification = ({
       );
     } else {
       // Cloud Manager does not know about the country, so lets refetch the user's phone number so we know it's displaying correctly
-      queryClient.invalidateQueries([queryKey]);
+      queryClient.invalidateQueries(profileQueries.profile().queryKey);
     }
 
     // reset form states

packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx

@@ -6,7 +6,6 @@ import { useQueryClient } from '@tanstack/react-query';
 import { StyledLinkButton } from 'src/components/Button/StyledLinkButton';
 import { Notice } from 'src/components/Notice/Notice';
 import { Typography } from 'src/components/Typography';
-import { queryKey } from 'src/queries/profile';
 import { useSecurityQuestions } from 'src/queries/securityQuestions';
 import { getAPIErrorOrDefault } from 'src/utilities/errorUtils';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
@@ -20,6 +19,7 @@ import {
   StyledRootContainer,
 } from './TwoFactor.styles';
 import { TwoFactorToggle } from './TwoFactorToggle';
+import { profileQueries } from 'src/queries/profile';
 
 export interface TwoFactorProps {
   disabled?: boolean;
@@ -61,7 +61,7 @@ export const TwoFactor = (props: TwoFactorProps) => {
    */
   const handleEnableSuccess = (scratchCode: string) => {
     // Refetch Profile with React Query so profile is up to date
-    queryClient.invalidateQueries([queryKey]);
+    queryClient.invalidateQueries(profileQueries.profile().queryKey);
     setSuccess('Two-factor authentication has been enabled.');
     setShowQRCode(false);
     setTwoFactorEnabled(true);

packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx

@@ -33,11 +33,11 @@ import {
   withQueryClient,
 } from 'src/containers/withQueryClient.container';
 import { StackScriptForm } from 'src/features/StackScripts/StackScriptForm/StackScriptForm';
-import { queryKey } from 'src/queries/profile';
 import { filterImagesByType } from 'src/store/image/image.helpers';
 import { getAPIErrorFor } from 'src/utilities/getAPIErrorFor';
 import { scrollErrorIntoView } from 'src/utilities/scrollErrorIntoView';
 import { storage } from 'src/utilities/storage';
+import { profileQueries } from 'src/queries/profile';
 
 interface State {
   apiResponse?: StackScript;
@@ -359,7 +359,7 @@ export class StackScriptCreate extends React.Component<CombinedProps, State> {
           return;
         }
         if (profile.data?.restricted) {
-          queryClient.invalidateQueries([queryKey, 'grants']);
+          queryClient.invalidateQueries(profileQueries.grants.queryKey);
         }
         this.setState({ isSubmitting: false });
         this.resetAllFields();

packages/manager/src/hooks/useInitialRequests.ts

@@ -1,11 +1,12 @@
 import { getAccountInfo, getAccountSettings } from '@linode/api-v4/lib/account';
-import { getProfile, getUserPreferences } from '@linode/api-v4/lib/profile';
-import * as React from 'react';
+import { getUserPreferences } from '@linode/api-v4/lib/profile';
 import { useQueryClient } from '@tanstack/react-query';
+import * as React from 'react';
 
 import { useAuthentication } from 'src/hooks/useAuthentication';
 import { usePendingUpload } from 'src/hooks/usePendingUpload';
 import { queryKey as accountQueryKey } from 'src/queries/account';
+import { profileQueries } from 'src/queries/profile';
 import { redirectToLogin } from 'src/session';
 
 /**
@@ -66,10 +67,7 @@ export const useInitialRequests = () => {
       }),
 
       // Username and whether a user is restricted
-      queryClient.prefetchQuery({
-        queryFn: () => getProfile(),
-        queryKey: ['profile'],
-      }),
+      queryClient.prefetchQuery(profileQueries.profile()),
 
       // Is a user managed
       queryClient.prefetchQuery({

packages/manager/src/queries/base.ts

@@ -4,15 +4,12 @@ import {
   QueryClient,
   QueryKey,
   UseMutationOptions,
-  UseQueryOptions,
 } from '@tanstack/react-query';
 
 // =============================================================================
 // Config
 // =============================================================================
-type QueryConfigTypes = 'longLived' | 'noRetry' | 'oneTimeFetch' | 'shortLived';
-
-export const queryPresets: Record<QueryConfigTypes, UseQueryOptions<any>> = {
+export const queryPresets = {
   longLived: {
     cacheTime: 10 * 60 * 1000,
     refetchOnMount: true,

packages/manager/src/queries/databases.ts

@@ -41,7 +41,7 @@ import { EventHandlerData } from 'src/hooks/useEventHandlers';
 import { getAll } from 'src/utilities/getAll';
 
 import { queryPresets, updateInPaginatedStore } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 export const queryKey = 'databases';
 
@@ -116,7 +116,7 @@ export const useCreateDatabaseMutation = () => {
         // Add database to the cache
         queryClient.setQueryData([queryKey, data.id], data);
         // If a restricted user creates an entity, we must make sure grants are up to date.
-        queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+        queryClient.invalidateQueries(profileQueries.grants.queryKey);
       },
     }
   );

packages/manager/src/queries/domains.ts

@@ -24,8 +24,8 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { getAll } from 'src/utilities/getAll';
 
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
 import { EventHandlerData } from 'src/hooks/useEventHandlers';
+import { profileQueries } from './profile';
 
 export const queryKey = 'domains';
 
@@ -57,7 +57,7 @@ export const useCreateDomainMutation = () => {
       queryClient.invalidateQueries([queryKey, 'paginated']);
       queryClient.setQueryData([queryKey, 'domain', domain.id], domain);
       // If a restricted user creates an entity, we must make sure grants are up to date.
-      queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+      queryClient.invalidateQueries(profileQueries.grants.queryKey);
     },
   });
 };

packages/manager/src/queries/firewalls.ts

@@ -27,7 +27,7 @@ import { queryKey as linodesQueryKey } from 'src/queries/linodes/linodes';
 import { getAll } from 'src/utilities/getAll';
 
 import { updateInPaginatedStore } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 export const queryKey = 'firewall';
 
@@ -123,7 +123,7 @@ export const useCreateFirewall = () => {
         queryClient.invalidateQueries([queryKey, 'paginated']);
         queryClient.setQueryData([queryKey, 'firewall', firewall.id], firewall);
         // If a restricted user creates an entity, we must make sure grants are up to date.
-        queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+        queryClient.invalidateQueries(profileQueries.grants.queryKey);
       },
     }
   );

packages/manager/src/queries/images.ts

@@ -23,11 +23,11 @@ import {
   useQueryClient,
 } from '@tanstack/react-query';
 
+import { EventHandlerData } from 'src/hooks/useEventHandlers';
 import { getAll } from 'src/utilities/getAll';
 
 import { doesItemExistInPaginatedStore, updateInPaginatedStore } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
-import { EventHandlerData } from 'src/hooks/useEventHandlers';
+import { profileQueries } from './profile';
 
 export const queryKey = 'images';
 
@@ -55,7 +55,7 @@ export const useCreateImageMutation = () => {
       onSuccess() {
         queryClient.invalidateQueries([`${queryKey}-list`]);
         // If a restricted user creates an entity, we must make sure grants are up to date.
-        queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+        queryClient.invalidateQueries(profileQueries.grants.queryKey);
       },
     }
   );

packages/manager/src/queries/kubernetes.ts

@@ -36,7 +36,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 import { getAll } from 'src/utilities/getAll';
 
 import { queryPresets, updateInPaginatedStore } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 export const queryKey = `kubernetes`;
 
@@ -141,7 +141,7 @@ export const useCreateKubernetesClusterMutation = () => {
       onSuccess() {
         queryClient.invalidateQueries([`${queryKey}-list`]);
         // If a restricted user creates an entity, we must make sure grants are up to date.
-        queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+        queryClient.invalidateQueries(profileQueries.grants.queryKey);
       },
     }
   );

packages/manager/src/queries/linodes/linodes.ts

@@ -40,7 +40,7 @@ import { manuallySetVPCConfigInterfacesToActive } from 'src/utilities/configs';
 
 import { queryKey as accountNotificationsQueryKey } from '../accountNotifications';
 import { queryPresets } from '../base';
-import { queryKey as PROFILE_QUERY_KEY } from '../profile';
+import { profileQueries } from '../profile';
 import { getAllLinodeKernelsRequest, getAllLinodesRequest } from './requests';
 
 export const queryKey = 'linodes';
@@ -159,7 +159,7 @@ export const useCreateLinodeMutation = () => {
         linode
       );
       // If a restricted user creates an entity, we must make sure grants are up to date.
-      queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+      queryClient.invalidateQueries(profileQueries.grants.queryKey);
     },
   });
 };

packages/manager/src/queries/nodebalancers.ts

@@ -23,13 +23,13 @@ import {
   Params,
   ResourcePage,
 } from '@linode/api-v4/lib/types';
-import { DateTime } from 'luxon';
 import {
   useInfiniteQuery,
   useMutation,
   useQuery,
   useQueryClient,
 } from '@tanstack/react-query';
+import { DateTime } from 'luxon';
 
 import { EventHandlerData } from 'src/hooks/useEventHandlers';
 import { queryKey as firewallsQueryKey } from 'src/queries/firewalls';
@@ -38,7 +38,7 @@ import { getAll } from 'src/utilities/getAll';
 
 import { queryPresets } from './base';
 import { itemInListCreationHandler, itemInListMutationHandler } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 export const queryKey = 'nodebalancers';
 
@@ -114,7 +114,7 @@ export const useNodebalancerCreateMutation = () => {
         queryClient.invalidateQueries([queryKey]);
         queryClient.setQueryData([queryKey, 'nodebalancer', data.id], data);
         // If a restricted user creates an entity, we must make sure grants are up to date.
-        queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+        queryClient.invalidateQueries(profileQueries.grants.queryKey);
       },
     }
   );

packages/manager/src/queries/placementGroups.ts

@@ -17,7 +17,7 @@ import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query';
 
 import { getAll } from 'src/utilities/getAll';
 
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 import type {
   AssignLinodesToPlacementGroupPayload,
@@ -76,7 +76,7 @@ export const useCreatePlacementGroup = () => {
         placementGroup
       );
       // If a restricted user creates an entity, we must make sure grants are up to date.
-      queryClient.invalidateQueries([PROFILE_QUERY_KEY, 'grants']);
+      queryClient.invalidateQueries(profileQueries.grants.queryKey);
     },
   });
 };