fix: APP-595 invalidate payment methods query on login/logout (#2605)

Author: blushi

web-marketplace/src/lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.ts

@@ -1,16 +1,16 @@
 import { apiUri } from 'lib/apiUri';
 
-import { GET_PAYMENT_METHODS_QUERY_KEY } from './getPaymentMethodsQuery.constants';
 import {
   ReactQueryGetPaymentMethodsQueryParams,
   ReactQueryGetPaymentMethodsQueryResponse,
 } from './getPaymentMethodsQuery.types';
+import { getPaymentMethodsQueryKey } from './getPaymentMethodsQuery.utils';
 
 export const getPaymentMethodsQuery = ({
   limit,
   ...params
 }: ReactQueryGetPaymentMethodsQueryParams): ReactQueryGetPaymentMethodsQueryResponse => ({
-  queryKey: [GET_PAYMENT_METHODS_QUERY_KEY, limit],
+  queryKey: getPaymentMethodsQueryKey(limit),
   queryFn: async () => {
     try {
       const resp = await fetch(

web-marketplace/src/lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.utils.ts

@@ -0,0 +1,6 @@
+import { GET_PAYMENT_METHODS_QUERY_KEY } from './getPaymentMethodsQuery.constants';
+
+export const getPaymentMethodsQueryKey = (limit?: number) => [
+  GET_PAYMENT_METHODS_QUERY_KEY,
+  limit,
+];

web-marketplace/src/lib/wallet/hooks/useLogin.tsx

@@ -7,6 +7,7 @@ import { apiUri } from 'lib/apiUri';
 import { useRetryCsrfRequest } from 'lib/errors/hooks/useRetryCsrfRequest';
 import { GET_ACCOUNTS_QUERY_KEY } from 'lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.constants';
 import { getCsrfTokenQuery } from 'lib/queries/react-query/registry-server/getCsrfTokenQuery/getCsrfTokenQuery';
+import { getPaymentMethodsQueryKey } from 'lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.utils';
 import { AccountEvent, Track } from 'lib/tracker/types';
 import { LoginParams, SignArbitraryType } from 'lib/wallet/wallet';
 
@@ -70,10 +71,15 @@ export const useLogin = ({
               data: { signature },
               token,
               retryCsrfRequest,
-              onSuccess: async () =>
+              onSuccess: async () => {
                 await reactQueryClient.invalidateQueries({
                   queryKey: [GET_ACCOUNTS_QUERY_KEY],
-                }),
+                });
+                await reactQueryClient.invalidateQueries({
+                  queryKey: getPaymentMethodsQueryKey(),
+                  refetchType: 'all',
+                });
+              },
             });
 
             if (res?.user?.accountId && track) {

web-marketplace/src/lib/wallet/hooks/useLogout.tsx

@@ -7,6 +7,7 @@ import { CSRF_ERROR } from 'lib/errors/apiErrors';
 import { useRetryCsrfRequest } from 'lib/errors/hooks/useRetryCsrfRequest';
 import { GET_ACCOUNTS_QUERY_KEY } from 'lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.constants';
 import { getCsrfTokenQuery } from 'lib/queries/react-query/registry-server/getCsrfTokenQuery/getCsrfTokenQuery';
+import { getPaymentMethodsQueryKey } from 'lib/queries/react-query/registry-server/getPaymentMethodsQuery/getPaymentMethodsQuery.utils';
 
 type Params = {
   setError: UseStateSetter<unknown>;
@@ -33,9 +34,13 @@ export const useLogout = ({ setError }: Params) => {
           );
           const bodyResponse = await response.json();
           if (!bodyResponse.error) {
-            reactQueryClient.invalidateQueries({
+            await reactQueryClient.invalidateQueries({
               queryKey: [GET_ACCOUNTS_QUERY_KEY],
             });
+            await reactQueryClient.invalidateQueries({
+              queryKey: getPaymentMethodsQueryKey(),
+              refetchType: 'all',
+            });
           }
 
           return bodyResponse;