feat: refactor verify connection mutation with the REST API endpoint

packages/backend/src/graphql/mutation-resolvers.js

@@ -1,8 +1,3 @@
-// Converted mutations
+const mutationResolvers = {};
-import verifyConnection from './mutations/verify-connection.js';
-
-const mutationResolvers = {
-  verifyConnection,
-};
 
 export default mutationResolvers;

packages/backend/src/graphql/mutations/verify-connection.js

@@ -1,29 +0,0 @@
-import App from '../../models/app.js';
-import globalVariable from '../../helpers/global-variable.js';
-
-const verifyConnection = async (_parent, params, context) => {
-  context.currentUser.can('create', 'Connection');
-
-  let connection = await context.currentUser
-    .$relatedQuery('connections')
-    .findOne({
-      id: params.input.id,
-    })
-    .throwIfNotFound();
-
-  const app = await App.findOneByKey(connection.key);
-  const $ = await globalVariable({ connection, app });
-  await app.auth.verifyCredentials($);
-
-  connection = await connection.$query().patchAndFetch({
-    verified: true,
-    draft: false,
-  });
-
-  return {
-    ...connection,
-    app,
-  };
-};
-
-export default verifyConnection;

packages/backend/src/graphql/schema.graphql

@@ -3,7 +3,7 @@ type Query {
 }
 
 type Mutation {
-  verifyConnection(input: VerifyConnectionInput): Connection
+  placeholderQuery(name: String): Boolean
 }
 
 type Trigger {
@@ -184,10 +184,6 @@ type SamlAuthProvidersRoleMapping {
   remoteRoleName: String
 }
 
-input VerifyConnectionInput {
-  id: String!
-}
-
 input UserRoleInput {
   id: String
 }

packages/web/src/graphql/cache.js

@@ -6,36 +6,7 @@ const cache = new InMemoryCache({
     },
     Mutation: {
       mutationType: true,
-      fields: {
+      fields: {},
-        verifyConnection: {
-          merge(existing, verifiedConnection, { readField, cache }) {
-            const appKey = readField('key', verifiedConnection);
-            const appCacheId = cache.identify({
-              __typename: 'App',
-              key: appKey,
-            });
-            cache.modify({
-              id: appCacheId,
-              fields: {
-                connections: (existingConnections) => {
-                  const existingConnectionIndex = existingConnections.findIndex(
-                    (connection) => {
-                      return connection.__ref === verifiedConnection.__ref;
-                    }
-                  );
-                  const connectionExists = existingConnectionIndex !== -1;
-                  // newly created and verified connection
-                  if (!connectionExists) {
-                    return [verifiedConnection, ...existingConnections];
-                  }
-                  return existingConnections;
-                },
-              },
-            });
-            return verifiedConnection;
-          },
-        },
-      },
     },
   },
 });

packages/web/src/graphql/mutations/index.js

@@ -1,7 +1,3 @@
-import { VERIFY_CONNECTION } from './verify-connection';
+const mutations = {};
-
-const mutations = {
-  verifyConnection: VERIFY_CONNECTION,
-};
 
 export default mutations;

packages/web/src/graphql/mutations/verify-connection.js

@@ -1,17 +0,0 @@
-import { gql } from '@apollo/client';
-export const VERIFY_CONNECTION = gql`
-  mutation VerifyConnection($input: VerifyConnectionInput) {
-    verifyConnection(input: $input) {
-      id
-      key
-      verified
-      formattedData {
-        screenName
-      }
-      createdAt
-      app {
-        key
-      }
-    }
-  }
-`;

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

@@ -12,6 +12,7 @@ import useCreateConnection from './useCreateConnection';
 import useCreateConnectionAuthUrl from './useCreateConnectionAuthUrl';
 import useUpdateConnection from './useUpdateConnection';
 import useResetConnection from './useResetConnection';
+import useVerifyConnection from './useVerifyConnection';
 
 function getSteps(auth, hasConnection, useShared) {
   if (hasConnection) {
@@ -39,6 +40,7 @@ export default function useAuthenticateApp(payload) {
     React.useState(false);
   const formatMessage = useFormatMessage();
   const steps = getSteps(auth?.data, !!connectionId, useShared);
+  const { mutateAsync: verifyConnection } = useVerifyConnection();
 
   const authenticate = React.useMemo(() => {
     if (!steps?.length) return;
@@ -91,6 +93,9 @@ export default function useAuthenticateApp(payload) {
               const stepResponse = await resetConnection(response.connectionId);
 
               response[step.name] = stepResponse.data;
+            } else if (step.name === 'verifyConnection') {
+              const stepResponse = await verifyConnection(variables?.id);
+              response[step.name] = stepResponse?.data;
             } else {
               const stepResponse = await processMutation(step.name, variables);
               response[step.name] = stepResponse;

packages/web/src/hooks/useVerifyConnection.js

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useVerifyConnection() {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async (connectionId) => {
+      try {
+        const { data } = await api.post(
+          `/v1/connections/${connectionId}/verify`,
+        );
+
+        return data;
+      } catch {
+        throw new Error('Failed while verifying connection!');
+      }
+    },
+    onSuccess: (data) => {
+      const appKey = data?.data.key;
+      queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'connections'],
+      });
+    },
+  });
+
+  return query;
+}