feat(useAuthenticateApp): centralize invalidating queries

packages/web/src/hooks/useAuthenticateApp.ee.js

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { useQueryClient } from '@tanstack/react-query';
 
 import {
   processMutation,
@@ -32,6 +33,7 @@ function getSteps(auth, hasConnection, useShared) {
 export default function useAuthenticateApp(payload) {
   const { appKey, appAuthClientId, connectionId, useShared = false } = payload;
   const { data: auth } = useAppAuth(appKey);
+  const queryClient = useQueryClient();
   const { mutateAsync: createConnection } = useCreateConnection(appKey);
   const { mutateAsync: createConnectionAuthUrl } = useCreateConnectionAuthUrl();
   const { mutateAsync: updateConnection } = useUpdateConnection();
@@ -94,7 +96,9 @@ export default function useAuthenticateApp(payload) {
 
               response[step.name] = stepResponse.data;
             } else if (step.name === 'verifyConnection') {
-              const stepResponse = await verifyConnection(variables?.id);
+              const stepResponse = await verifyConnection(
+                response.connectionId,
+              );
               response[step.name] = stepResponse?.data;
             } else {
               const stepResponse = await processMutation(step.name, variables);
@@ -107,26 +111,37 @@ export default function useAuthenticateApp(payload) {
         } catch (err) {
           console.log(err);
           setAuthenticationInProgress(false);
+
+          queryClient.invalidateQueries({
+            queryKey: ['apps', appKey, 'connections'],
+          });
+
           throw err;
         }
-        stepIndex++;
 
-        if (stepIndex === steps.length) {
-          return response;
-        }
-        setAuthenticationInProgress(false);
+        stepIndex++;
       }
+
+      await queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'connections'],
+      });
+
+      setAuthenticationInProgress(false);
+
+      return response;
     };
   }, [
     steps,
     appKey,
     appAuthClientId,
     connectionId,
+    queryClient,
     formatMessage,
     createConnection,
     createConnectionAuthUrl,
     updateConnection,
     resetConnection,
+    verifyConnection,
   ]);
 
   return {

packages/web/src/hooks/useCreateConnection.js

@@ -1,10 +1,8 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
 export default function useCreateConnection(appKey) {
-  const queryClient = useQueryClient();
-
   const query = useMutation({
     mutationFn: async ({ appAuthClientId, formattedData }) => {
       const { data } = await api.post(`/v1/apps/${appKey}/connections`, {
@@ -14,12 +12,6 @@ export default function useCreateConnection(appKey) {
 
       return data;
     },
-
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        queryKey: ['apps', appKey, 'connections'],
-      });
-    },
   });
 
   return query;

packages/web/src/hooks/useVerifyConnection.js

@@ -1,9 +1,7 @@
-import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { useMutation } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useVerifyConnection() {
-  const queryClient = useQueryClient();
-
   const query = useMutation({
     mutationFn: async (connectionId) => {
       try {
@@ -16,12 +14,6 @@ export default function useVerifyConnection() {
         throw new Error('Failed while verifying connection!');
       }
     },
-    onSuccess: (data) => {
-      const appKey = data?.data.key;
-      queryClient.invalidateQueries({
-        queryKey: ['apps', appKey, 'connections'],
-      });
-    },
   });
 
   return query;