refactor: [M3-7437] - Prepare Profile Queries for React Query v5

packages/manager/package.json

@@ -79,6 +79,7 @@
     "tss-react": "^4.8.2",
     "typescript-fsa": "^3.0.0",
     "typescript-fsa-reducers": "^1.2.0",
+    "@bnussman/query-key": "0.0.7",
     "xterm": "^4.2.0",
     "yup": "^0.32.9",
     "zxcvbn": "^4.4.2"

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

@@ -12,7 +12,7 @@ import { TextField } from 'src/components/TextField';
 import { Typography } from 'src/components/Typography';
 import { InputAdornment } from 'src/components/InputAdornment';
 import {
-  queryKey,
+  profileQueries,
   updateProfileData,
   useProfile,
   useSendPhoneVerificationCodeMutation,
@@ -94,7 +94,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 '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

@@ -35,11 +35,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;
@@ -361,7 +361,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/queries/databases.ts

@@ -41,7 +41,7 @@ import { EventWithStore } from 'src/events';
 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,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query';
 
 import { EventWithStore } from 'src/events';
 import { getAll } from 'src/utilities/getAll';
-
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+import { profileQueries } from './profile';
 
 export const queryKey = 'domains';
 
@@ -57,7 +56,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

@@ -27,7 +27,7 @@ import { EventWithStore } from 'src/events';
 import { getAll } from 'src/utilities/getAll';
 
 import { doesItemExistInPaginatedStore, updateInPaginatedStore } from './base';
-import { queryKey as PROFILE_QUERY_KEY } from './profile';
+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 '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,8 +40,8 @@ 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 { getAllLinodeKernelsRequest, getAllLinodesRequest } from './requests';
+import { profileQueries } from '../profile';
 
 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

@@ -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/profile.ts

@@ -1,3 +1,5 @@
+import { getQueryKeys } from '@bnussman/query-key';
+import { Grants } from '@linode/api-v4';
 import {
   Profile,
   SSHKey,
@@ -8,6 +10,8 @@ import {
   deleteSSHKey,
   deleteTrustedDevice,
   disableTwoFactor,
+  getAppTokens,
+  getPersonalAccessTokens,
   getProfile,
   getSSHKeys,
   getTrustedDevices,
@@ -33,15 +37,37 @@ import {
 
 import { EventWithStore } from 'src/events';
 
-import { Grants } from '../../../api-v4/lib';
 import { queryKey as accountQueryKey } from './account';
 import { queryPresets } from './base';
 
-export const queryKey = 'profile';
+export const profileQueries = getQueryKeys({
+  appTokens: (params: Params = {}, filter: Filter = {}) => ({
+    queryFn: () => getAppTokens(params, filter),
+    queryKey: [params, filter],
+  }),
+  grants: {
+    queryFn: listGrants,
+  },
+  personalAccessTokens: (params: Params = {}, filter: Filter = {}) => ({
+    queryFn: () => getPersonalAccessTokens(params, filter),
+    queryKey: [params, filter],
+  }),
+  profile: {
+    queryFn: getProfile,
+  },
+  sshKeys: (params: Params = {}, filter: Filter = {}) => ({
+    queryFn: () => getSSHKeys(params, filter),
+    queryKey: [params, filter],
+  }),
+  trustedDevices: (params: Params = {}, filter: Filter = {}) => ({
+    queryFn: () => getTrustedDevices(params, filter),
+    queryKey: [params, filter],
+  }),
+});
 
 export const useProfile = (givenProfile?: Profile) =>
-  useQuery<Profile, APIError[]>(queryKey, getProfile, {
-    ...queryPresets.oneTimeFetch,
+  useQuery<Profile, APIError[]>({
+    ...profileQueries.profile,
     initialData: givenProfile,
   });
 
@@ -57,24 +83,29 @@ export const updateProfileData = (
   newData: Partial<Profile>,
   queryClient: QueryClient
 ): void => {
-  queryClient.setQueryData(queryKey, (oldData: Profile) => ({
-    ...oldData,
-    ...newData,
-  }));
+  queryClient.setQueryData(
+    profileQueries.profile.queryKey,
+    (oldData: Profile) => ({
+      ...oldData,
+      ...newData,
+    })
+  );
 };
 
 export const useGrants = () => {
   const { data: profile } = useProfile();
-  return useQuery<Grants, APIError[]>([queryKey, 'grants'], listGrants, {
+  return useQuery<Grants, APIError[]>({
+    ...profileQueries.grants,
     ...queryPresets.oneTimeFetch,
     enabled: Boolean(profile?.restricted),
   });
 };
 
 export const getProfileData = (queryClient: QueryClient) =>
-  queryClient.getQueryData<Profile>(queryKey);
+  queryClient.getQueryData<Profile>(profileQueries.profile.queryKey);
+
 export const getGrantData = (queryClient: QueryClient) =>
-  queryClient.getQueryData<Grants>([queryKey, 'grants']);
+  queryClient.getQueryData<Grants>(profileQueries.grants.queryKey);
 
 export const useSMSOptOutMutation = () => {
   const queryClient = useQueryClient();
@@ -100,22 +131,19 @@ export const useSSHKeysQuery = (
   filter?: Filter,
   enabled = true
 ) =>
-  useQuery(
-    [queryKey, 'ssh-keys', 'paginated', params, filter],
-    () => getSSHKeys(params, filter),
-    {
-      enabled,
-      keepPreviousData: true,
-    }
-  );
+  useQuery({
+    ...profileQueries.sshKeys(params, filter),
+    enabled,
+    keepPreviousData: true,
+  });
 
 export const useCreateSSHKeyMutation = () => {
   const queryClient = useQueryClient();
   return useMutation<SSHKey, APIError[], { label: string; ssh_key: string }>(
     createSSHKey,
     {
       onSuccess() {
-        queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+        queryClient.invalidateQueries(profileQueries.sshKeys.queryKey);
         // also invalidate the /account/users data because that endpoint returns some SSH key data
         queryClient.invalidateQueries([accountQueryKey, 'users']);
       },
@@ -129,7 +157,7 @@ export const useUpdateSSHKeyMutation = (id: number) => {
     (data) => updateSSHKey(id, data),
     {
       onSuccess() {
-        queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+        queryClient.invalidateQueries(profileQueries.sshKeys.queryKey);
         // also invalidate the /account/users data because that endpoint returns some SSH key data
         queryClient.invalidateQueries([accountQueryKey, 'users']);
       },
@@ -141,7 +169,7 @@ export const useDeleteSSHKeyMutation = (id: number) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteSSHKey(id), {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+      queryClient.invalidateQueries(profileQueries.sshKeys.queryKey);
       // also invalidate the /account/users data because that endpoint returns some SSH key data
       queryClient.invalidateQueries([accountQueryKey, 'users']);
     },
@@ -152,25 +180,22 @@ export const sshKeyEventHandler = (event: EventWithStore) => {
   // This event handler is a bit agressive and will over-fetch, but UX will
   // be great because this will ensure Cloud has up to date data all the time.
 
-  event.queryClient.invalidateQueries([queryKey, 'ssh-keys']);
+  event.queryClient.invalidateQueries(profileQueries.sshKeys.queryKey);
   // also invalidate the /account/users data because that endpoint returns some SSH key data
   event.queryClient.invalidateQueries([accountQueryKey, 'users']);
 };
 
 export const useTrustedDevicesQuery = (params?: Params, filter?: Filter) =>
-  useQuery<ResourcePage<TrustedDevice>, APIError[]>(
-    [queryKey, 'trusted-devices', 'paginated', params, filter],
-    () => getTrustedDevices(params, filter),
-    {
-      keepPreviousData: true,
-    }
-  );
+  useQuery<ResourcePage<TrustedDevice>, APIError[]>({
+    ...profileQueries.trustedDevices(params, filter),
+    keepPreviousData: true,
+  });
 
 export const useRevokeTrustedDeviceMutation = (id: number) => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(() => deleteTrustedDevice(id), {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey, 'trusted-devices']);
+      queryClient.invalidateQueries(profileQueries.trustedDevices.queryKey);
     },
   });
 };
@@ -179,7 +204,9 @@ export const useDisableTwoFactorMutation = () => {
   const queryClient = useQueryClient();
   return useMutation<{}, APIError[]>(disableTwoFactor, {
     onSuccess() {
-      queryClient.invalidateQueries([queryKey]);
+      queryClient.invalidateQueries(profileQueries.profile.queryKey);
+      // also invalidate the /account/users data because that endpoint returns 2FA data
+      queryClient.invalidateQueries([accountQueryKey, 'users']);
     },
   });
 };