From 99372613e3f21ebb9f967c78e7b61cfabfbf95f9 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 12 Dec 2023 14:46:45 -0500 Subject: [PATCH 1/4] replace query key with factory --- packages/manager/package.json | 1 + .../PhoneVerification/PhoneVerification.tsx | 4 +- .../TwoFactor/TwoFactor.tsx | 4 +- .../StackScriptCreate/StackScriptCreate.tsx | 4 +- packages/manager/src/queries/databases.ts | 4 +- packages/manager/src/queries/domains.ts | 5 +- packages/manager/src/queries/firewalls.ts | 4 +- packages/manager/src/queries/images.ts | 4 +- packages/manager/src/queries/kubernetes.ts | 4 +- .../manager/src/queries/linodes/linodes.ts | 4 +- packages/manager/src/queries/nodebalancers.ts | 4 +- packages/manager/src/queries/profile.ts | 91 ++++++++++++------- packages/manager/src/queries/tokens.ts | 34 +++---- packages/manager/src/queries/volumes.ts | 4 +- yarn.lock | 5 + 15 files changed, 102 insertions(+), 74 deletions(-) diff --git a/packages/manager/package.json b/packages/manager/package.json index ae868867563..6882f9ccd8c 100644 --- a/packages/manager/package.json +++ b/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" diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx index c247fc300ad..e2afdd5516e 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/PhoneVerification/PhoneVerification.tsx +++ b/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 diff --git a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx b/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx index 0d1b89a8c7b..3b00f4b2cbf 100644 --- a/packages/manager/src/features/Profile/AuthenticationSettings/TwoFactor/TwoFactor.tsx +++ b/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); diff --git a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx b/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx index fe935a1c914..163905627e0 100644 --- a/packages/manager/src/features/StackScripts/StackScriptCreate/StackScriptCreate.tsx +++ b/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 { return; } if (profile.data?.restricted) { - queryClient.invalidateQueries([queryKey, 'grants']); + queryClient.invalidateQueries(profileQueries.grants.queryKey); } this.setState({ isSubmitting: false }); this.resetAllFields(); diff --git a/packages/manager/src/queries/databases.ts b/packages/manager/src/queries/databases.ts index 167117a62c7..71c264bfd54 100644 --- a/packages/manager/src/queries/databases.ts +++ b/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); }, } ); diff --git a/packages/manager/src/queries/domains.ts b/packages/manager/src/queries/domains.ts index 674e62a0f4b..d6d9d1a98b2 100644 --- a/packages/manager/src/queries/domains.ts +++ b/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); }, }); }; diff --git a/packages/manager/src/queries/firewalls.ts b/packages/manager/src/queries/firewalls.ts index 37c3324a011..bf6654bf246 100644 --- a/packages/manager/src/queries/firewalls.ts +++ b/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); }, } ); diff --git a/packages/manager/src/queries/images.ts b/packages/manager/src/queries/images.ts index ba62c58eea3..db9e104a9f8 100644 --- a/packages/manager/src/queries/images.ts +++ b/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); }, } ); diff --git a/packages/manager/src/queries/kubernetes.ts b/packages/manager/src/queries/kubernetes.ts index dab9086a5d0..10a26dc8f2c 100644 --- a/packages/manager/src/queries/kubernetes.ts +++ b/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); }, } ); diff --git a/packages/manager/src/queries/linodes/linodes.ts b/packages/manager/src/queries/linodes/linodes.ts index aed5a974fcd..46abb5083a8 100644 --- a/packages/manager/src/queries/linodes/linodes.ts +++ b/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); }, }); }; diff --git a/packages/manager/src/queries/nodebalancers.ts b/packages/manager/src/queries/nodebalancers.ts index 444805429b6..b877fa52798 100644 --- a/packages/manager/src/queries/nodebalancers.ts +++ b/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); }, } ); diff --git a/packages/manager/src/queries/profile.ts b/packages/manager/src/queries/profile.ts index 18e89ff4139..2500342e5b0 100644 --- a/packages/manager/src/queries/profile.ts +++ b/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(queryKey, getProfile, { - ...queryPresets.oneTimeFetch, + useQuery({ + ...profileQueries.profile, initialData: givenProfile, }); @@ -57,24 +83,29 @@ export const updateProfileData = ( newData: Partial, 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([queryKey, 'grants'], listGrants, { + return useQuery({ + ...profileQueries.grants, ...queryPresets.oneTimeFetch, enabled: Boolean(profile?.restricted), }); }; export const getProfileData = (queryClient: QueryClient) => - queryClient.getQueryData(queryKey); + queryClient.getQueryData(profileQueries.profile.queryKey); + export const getGrantData = (queryClient: QueryClient) => - queryClient.getQueryData([queryKey, 'grants']); + queryClient.getQueryData(profileQueries.grants.queryKey); export const useSMSOptOutMutation = () => { const queryClient = useQueryClient(); @@ -100,14 +131,11 @@ 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(); @@ -115,7 +143,7 @@ export const useCreateSSHKeyMutation = () => { 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, APIError[]>( - [queryKey, 'trusted-devices', 'paginated', params, filter], - () => getTrustedDevices(params, filter), - { - keepPreviousData: true, - } - ); + useQuery, 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']); }, }); }; diff --git a/packages/manager/src/queries/tokens.ts b/packages/manager/src/queries/tokens.ts index ce9f6d952b4..f8a8b96328e 100644 --- a/packages/manager/src/queries/tokens.ts +++ b/packages/manager/src/queries/tokens.ts @@ -2,8 +2,6 @@ import { createPersonalAccessToken, deleteAppToken, deletePersonalAccessToken, - getAppTokens, - getPersonalAccessTokens, updatePersonalAccessToken, } from '@linode/api-v4/lib/profile'; import { Token, TokenRequest } from '@linode/api-v4/lib/profile/types'; @@ -17,14 +15,12 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { EventWithStore } from 'src/events'; -import { updateInPaginatedStore } from './base'; -import { queryKey } from './profile'; +import { profileQueries } from './profile'; export const useAppTokensQuery = (params?: Params, filter?: Filter) => { return useQuery, APIError[]>({ keepPreviousData: true, - queryFn: () => getAppTokens(params, filter), - queryKey: [queryKey, 'app-tokens', params, filter], + ...profileQueries.appTokens(params, filter), }); }; @@ -34,8 +30,7 @@ export const usePersonalAccessTokensQuery = ( ) => { return useQuery, APIError[]>({ keepPreviousData: true, - queryFn: () => getPersonalAccessTokens(params, filter), - queryKey: [queryKey, 'personal-access-tokens', params, filter], + ...profileQueries.personalAccessTokens(params, filter), }); }; @@ -44,8 +39,10 @@ export const useCreatePersonalAccessTokenMutation = () => { return useMutation( createPersonalAccessToken, { - onSuccess: () => { - queryClient.invalidateQueries([queryKey, 'personal-access-tokens']); + onSuccess() { + queryClient.invalidateQueries( + profileQueries.personalAccessTokens.queryKey + ); }, } ); @@ -56,12 +53,9 @@ export const useUpdatePersonalAccessTokenMutation = (id: number) => { return useMutation>( (data) => updatePersonalAccessToken(id, data), { - onSuccess: (token) => { - updateInPaginatedStore( - [queryKey, 'personal-access-tokens'], - id, - token, - queryClient + onSuccess() { + queryClient.invalidateQueries( + profileQueries.personalAccessTokens.queryKey ); }, } @@ -75,7 +69,9 @@ export const useRevokePersonalAccessTokenMutation = (id: number) => { // Wait 1 second to invalidate cache after deletion because API needs time setTimeout( () => - queryClient.invalidateQueries([queryKey, 'personal-access-tokens']), + queryClient.invalidateQueries( + profileQueries.personalAccessTokens.queryKey + ), 1000 ); }, @@ -88,7 +84,7 @@ export const useRevokeAppAccessTokenMutation = (id: number) => { onSuccess() { // Wait 1 second to invalidate cache after deletion because API needs time setTimeout( - () => queryClient.invalidateQueries([queryKey, 'app-tokens']), + () => queryClient.invalidateQueries(profileQueries.appTokens.queryKey), 1000 ); }, @@ -96,5 +92,5 @@ export const useRevokeAppAccessTokenMutation = (id: number) => { }; export function tokenEventHandler({ queryClient }: EventWithStore) { - queryClient.invalidateQueries([queryKey, 'personal-access-tokens']); + queryClient.invalidateQueries(profileQueries.personalAccessTokens.queryKey); } diff --git a/packages/manager/src/queries/volumes.ts b/packages/manager/src/queries/volumes.ts index 9b237de9b6e..c28da1f986b 100644 --- a/packages/manager/src/queries/volumes.ts +++ b/packages/manager/src/queries/volumes.ts @@ -28,7 +28,7 @@ import { EventWithStore } from 'src/events'; 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 = 'volumes'; @@ -127,7 +127,7 @@ export const useCreateVolumeMutation = () => { onSuccess() { queryClient.invalidateQueries([queryKey]); // 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); }, }); }; diff --git a/yarn.lock b/yarn.lock index eb2f33c230a..91eada8bd7c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1609,6 +1609,11 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== +"@bnussman/query-key@0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@bnussman/query-key/-/query-key-0.0.7.tgz#8ba7a2d0707dd86faf7714bfcc8af1829f9b2b53" + integrity sha512-XkSfTSLb/Zzm0TziQKun3Qyxx6W0hp8ia9xhmPRVYBsg68msXr5d/Ws9p5RcSIBBpG5ueauOYEt4az/3L5M19g== + "@braintree/asset-loader@0.4.4": version "0.4.4" resolved "https://registry.yarnpkg.com/@braintree/asset-loader/-/asset-loader-0.4.4.tgz#9a5eda24c3627bfd5c7f7483cd48f0e411dd2f09" From 65988f59a124e836ccc162be3b88034df81b673e Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 12 Dec 2023 15:08:37 -0500 Subject: [PATCH 2/4] use new single-object queries and mutations --- packages/manager/src/queries/profile.ts | 68 ++++++++++++------------- packages/manager/src/queries/tokens.ts | 42 ++++++++------- 2 files changed, 54 insertions(+), 56 deletions(-) diff --git a/packages/manager/src/queries/profile.ts b/packages/manager/src/queries/profile.ts index 2500342e5b0..69f0badc5b6 100644 --- a/packages/manager/src/queries/profile.ts +++ b/packages/manager/src/queries/profile.ts @@ -73,10 +73,10 @@ export const useProfile = (givenProfile?: Profile) => export const useMutateProfile = () => { const queryClient = useQueryClient(); - return useMutation>( - (data) => updateProfile(data), - { onSuccess: (newData) => updateProfileData(newData, queryClient) } - ); + return useMutation>({ + mutationFn: (data) => updateProfile(data), + onSuccess: (newData) => updateProfileData(newData, queryClient), + }); }; export const updateProfileData = ( @@ -109,7 +109,8 @@ export const getGrantData = (queryClient: QueryClient) => export const useSMSOptOutMutation = () => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(smsOptOut, { + return useMutation<{}, APIError[]>({ + mutationFn: smsOptOut, onSuccess: () => { updateProfileData({ verified_phone_number: null }, queryClient); }, @@ -117,14 +118,14 @@ export const useSMSOptOutMutation = () => { }; export const useSendPhoneVerificationCodeMutation = () => - useMutation<{}, APIError[], SendPhoneVerificationCodePayload>( - sendCodeToPhoneNumber - ); + useMutation<{}, APIError[], SendPhoneVerificationCodePayload>({ + mutationFn: sendCodeToPhoneNumber, + }); export const useVerifyPhoneVerificationCodeMutation = () => - useMutation<{}, APIError[], VerifyVerificationCodePayload>( - verifyPhoneNumberCode - ); + useMutation<{}, APIError[], VerifyVerificationCodePayload>({ + mutationFn: verifyPhoneNumberCode, + }); export const useSSHKeysQuery = ( params?: Params, @@ -139,35 +140,32 @@ export const useSSHKeysQuery = ( export const useCreateSSHKeyMutation = () => { const queryClient = useQueryClient(); - return useMutation( - createSSHKey, - { - onSuccess() { - queryClient.invalidateQueries(profileQueries.sshKeys.queryKey); - // also invalidate the /account/users data because that endpoint returns some SSH key data - queryClient.invalidateQueries([accountQueryKey, 'users']); - }, - } - ); + return useMutation({ + mutationFn: createSSHKey, + onSuccess() { + queryClient.invalidateQueries(profileQueries.sshKeys.queryKey); + // also invalidate the /account/users data because that endpoint returns some SSH key data + queryClient.invalidateQueries([accountQueryKey, 'users']); + }, + }); }; export const useUpdateSSHKeyMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation( - (data) => updateSSHKey(id, data), - { - onSuccess() { - queryClient.invalidateQueries(profileQueries.sshKeys.queryKey); - // also invalidate the /account/users data because that endpoint returns some SSH key data - queryClient.invalidateQueries([accountQueryKey, 'users']); - }, - } - ); + return useMutation({ + mutationFn: (data) => updateSSHKey(id, data), + onSuccess() { + queryClient.invalidateQueries(profileQueries.sshKeys.queryKey); + // also invalidate the /account/users data because that endpoint returns some SSH key data + queryClient.invalidateQueries([accountQueryKey, 'users']); + }, + }); }; export const useDeleteSSHKeyMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(() => deleteSSHKey(id), { + return useMutation<{}, APIError[]>({ + mutationFn: () => deleteSSHKey(id), onSuccess() { queryClient.invalidateQueries(profileQueries.sshKeys.queryKey); // also invalidate the /account/users data because that endpoint returns some SSH key data @@ -193,7 +191,8 @@ export const useTrustedDevicesQuery = (params?: Params, filter?: Filter) => export const useRevokeTrustedDeviceMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(() => deleteTrustedDevice(id), { + return useMutation<{}, APIError[]>({ + mutationFn: () => deleteTrustedDevice(id), onSuccess() { queryClient.invalidateQueries(profileQueries.trustedDevices.queryKey); }, @@ -202,7 +201,8 @@ export const useRevokeTrustedDeviceMutation = (id: number) => { export const useDisableTwoFactorMutation = () => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(disableTwoFactor, { + return useMutation<{}, APIError[]>({ + mutationFn: disableTwoFactor, onSuccess() { queryClient.invalidateQueries(profileQueries.profile.queryKey); // also invalidate the /account/users data because that endpoint returns 2FA data diff --git a/packages/manager/src/queries/tokens.ts b/packages/manager/src/queries/tokens.ts index f8a8b96328e..bc4584b1fa6 100644 --- a/packages/manager/src/queries/tokens.ts +++ b/packages/manager/src/queries/tokens.ts @@ -36,35 +36,32 @@ export const usePersonalAccessTokensQuery = ( export const useCreatePersonalAccessTokenMutation = () => { const queryClient = useQueryClient(); - return useMutation( - createPersonalAccessToken, - { - onSuccess() { - queryClient.invalidateQueries( - profileQueries.personalAccessTokens.queryKey - ); - }, - } - ); + return useMutation({ + mutationFn: createPersonalAccessToken, + onSuccess() { + queryClient.invalidateQueries( + profileQueries.personalAccessTokens.queryKey + ); + }, + }); }; export const useUpdatePersonalAccessTokenMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation>( - (data) => updatePersonalAccessToken(id, data), - { - onSuccess() { - queryClient.invalidateQueries( - profileQueries.personalAccessTokens.queryKey - ); - }, - } - ); + return useMutation>({ + mutationFn: (data) => updatePersonalAccessToken(id, data), + onSuccess() { + queryClient.invalidateQueries( + profileQueries.personalAccessTokens.queryKey + ); + }, + }); }; export const useRevokePersonalAccessTokenMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(() => deletePersonalAccessToken(id), { + return useMutation<{}, APIError[]>({ + mutationFn: () => deletePersonalAccessToken(id), onSuccess() { // Wait 1 second to invalidate cache after deletion because API needs time setTimeout( @@ -80,7 +77,8 @@ export const useRevokePersonalAccessTokenMutation = (id: number) => { export const useRevokeAppAccessTokenMutation = (id: number) => { const queryClient = useQueryClient(); - return useMutation<{}, APIError[]>(() => deleteAppToken(id), { + return useMutation<{}, APIError[]>({ + mutationFn: () => deleteAppToken(id), onSuccess() { // Wait 1 second to invalidate cache after deletion because API needs time setTimeout( From 9d02325c6af6f621e7ebd3d4ec026cb2c88a40cf Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Tue, 12 Dec 2023 16:15:34 -0500 Subject: [PATCH 3/4] revert breaking change --- packages/manager/src/queries/tokens.ts | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/packages/manager/src/queries/tokens.ts b/packages/manager/src/queries/tokens.ts index bc4584b1fa6..64c7f9cfee6 100644 --- a/packages/manager/src/queries/tokens.ts +++ b/packages/manager/src/queries/tokens.ts @@ -16,6 +16,7 @@ import { useMutation, useQuery, useQueryClient } from 'react-query'; import { EventWithStore } from 'src/events'; import { profileQueries } from './profile'; +import { updateInPaginatedStore } from './base'; export const useAppTokensQuery = (params?: Params, filter?: Filter) => { return useQuery, APIError[]>({ @@ -50,9 +51,12 @@ export const useUpdatePersonalAccessTokenMutation = (id: number) => { const queryClient = useQueryClient(); return useMutation>({ mutationFn: (data) => updatePersonalAccessToken(id, data), - onSuccess() { - queryClient.invalidateQueries( - profileQueries.personalAccessTokens.queryKey + onSuccess(token) { + updateInPaginatedStore( + profileQueries.personalAccessTokens.queryKey, + id, + token, + queryClient ); }, }); From d291eafebf2eadc01757b66905e26e6884e5b156 Mon Sep 17 00:00:00 2001 From: Banks Nussman Date: Wed, 13 Dec 2023 12:20:15 -0500 Subject: [PATCH 4/4] fix unintended change --- packages/manager/src/queries/profile.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/manager/src/queries/profile.ts b/packages/manager/src/queries/profile.ts index 69f0badc5b6..1f26e09d6c6 100644 --- a/packages/manager/src/queries/profile.ts +++ b/packages/manager/src/queries/profile.ts @@ -68,6 +68,7 @@ export const profileQueries = getQueryKeys({ export const useProfile = (givenProfile?: Profile) => useQuery({ ...profileQueries.profile, + ...queryPresets.oneTimeFetch, initialData: givenProfile, });