refactor: rewrite test connection with RQ

packages/backend/src/graphql/queries/test-connection.js

@@ -1,38 +0,0 @@
-import App from '../../models/app.js';
-import Connection from '../../models/connection.js';
-import globalVariable from '../../helpers/global-variable.js';
-
-const testConnection = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Connection');
-  const userConnections = context.currentUser.$relatedQuery('connections');
-  const allConnections = Connection.query();
-  const connectionBaseQuery = conditions.isCreator
-    ? userConnections
-    : allConnections;
-
-  let connection = await connectionBaseQuery
-    .clone()
-    .findOne({
-      id: params.id,
-    })
-    .throwIfNotFound();
-
-  const app = await App.findOneByKey(connection.key, false);
-  const $ = await globalVariable({ connection, app });
-
-  let isStillVerified;
-  try {
-    isStillVerified = !!(await app.auth.isStillVerified($));
-  } catch {
-    isStillVerified = false;
-  }
-
-  connection = await connection.$query().patchAndFetch({
-    formattedData: connection.formattedData,
-    verified: isStillVerified,
-  });
-
-  return connection;
-};
-
-export default testConnection;

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

@@ -1,13 +1,11 @@
 import getAppAuthClient from './queries/get-app-auth-client.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
 import getDynamicData from './queries/get-dynamic-data.js';
-import testConnection from './queries/test-connection.js';
 
 const queryResolvers = {
   getAppAuthClient,
   getConnectedApps,
   getDynamicData,
-  testConnection,
 };
 
 export default queryResolvers;

packages/backend/src/graphql/schema.graphql

@@ -1,7 +1,6 @@
 type Query {
   getAppAuthClient(id: String!): AppAuthClient
   getConnectedApps(name: String): [App]
-  testConnection(id: String!): Connection
   getDynamicData(
     stepId: String!
     key: String!

packages/web/src/components/AppConnectionRow/index.jsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLazyQuery, useMutation } from '@apollo/client';
+import { useMutation } from '@apollo/client';
 import CheckCircleIcon from '@mui/icons-material/CheckCircle';
 import ErrorIcon from '@mui/icons-material/Error';
 import Skeleton from '@mui/material/Skeleton';
@@ -14,11 +14,11 @@ import { DateTime } from 'luxon';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import ConnectionContextMenu from 'components/AppConnectionContextMenu';
 import { DELETE_CONNECTION } from 'graphql/mutations/delete-connection';
-import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { ConnectionPropType } from 'propTypes/propTypes';
 import { CardContent, Typography } from './style';
 import useConnectionFlows from 'hooks/useConnectionFlows';
+import useTestConnection from 'hooks/useTestConnection';
 
 const countTranslation = (value) => (
   <>
@@ -36,19 +36,18 @@ function AppConnectionRow(props) {
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
 
-  const [testConnection, { called: testCalled, loading: testLoading }] =
-    useLazyQuery(TEST_CONNECTION, {
-      fetchPolicy: 'network-only',
-      onCompleted: () => {
-        setTimeout(() => setVerificationVisible(false), 3000);
-      },
-      onError: () => {
-        setTimeout(() => setVerificationVisible(false), 3000);
-      },
-    });
-
   const [deleteConnection] = useMutation(DELETE_CONNECTION);
 
+  const { mutate: testConnection, isPending: isTestConnectionPending } =
+    useTestConnection(
+      { connectionId: id },
+      {
+        onSettled: () => {
+          setTimeout(() => setVerificationVisible(false), 3000);
+        },
+      },
+    );
+
   const handleClose = () => {
     setAnchorEl(null);
   };
@@ -113,7 +112,7 @@ function AppConnectionRow(props) {
 
             <Box>
               <Stack direction="row" alignItems="center" spacing={1}>
-                {verificationVisible && testCalled && testLoading && (
+                {verificationVisible && isTestConnectionPending && (
                   <>
                     <CircularProgress size={16} />
                     <Typography variant="caption">
@@ -122,8 +121,7 @@ function AppConnectionRow(props) {
                   </>
                 )}
                 {verificationVisible &&
-                  testCalled &&
+                  !isTestConnectionPending &&
-                  !testLoading &&
                   verified && (
                     <>
                       <CheckCircleIcon fontSize="small" color="success" />
@@ -133,8 +131,7 @@ function AppConnectionRow(props) {
                     </>
                   )}
                 {verificationVisible &&
-                  testCalled &&
+                  !isTestConnectionPending &&
-                  !testLoading &&
                   !verified && (
                     <>
                       <ErrorIcon fontSize="small" color="error" />

packages/web/src/components/ChooseConnectionSubstep/index.jsx

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useLazyQuery } from '@apollo/client';
 import Autocomplete from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
@@ -12,7 +11,6 @@ import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import { EditorContext } from 'contexts/Editor';
-import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import {
@@ -23,6 +21,7 @@ import {
 import useStepConnection from 'hooks/useStepConnection';
 import { useQueryClient } from '@tanstack/react-query';
 import useAppConnections from 'hooks/useAppConnections';
+import useTestConnection from 'hooks/useTestConnection';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -72,13 +71,9 @@ function ChooseConnectionSubstep(props) {
   const stepConnection = stepConnectionData?.data;
 
   // TODO: show detailed error when connection test/verification fails
-  const [
+  const { mutate: testConnection, isPending: isTestConnectionPending } =
-    testConnection,
+    useTestConnection({
-    { loading: testResultLoading, refetch: retestConnection },
+      connectionId: stepConnection?.id,
-  ] = useLazyQuery(TEST_CONNECTION, {
-    variables: {
-      id: stepConnection?.id,
-    },
     });
 
   React.useEffect(() => {
@@ -201,11 +196,11 @@ function ChooseConnectionSubstep(props) {
 
   React.useEffect(() => {
     if (stepConnection?.id) {
-      retestConnection({
+      testConnection({
         id: stepConnection?.id,
       });
     }
-  }, [stepConnection?.id, retestConnection]);
+  }, [stepConnection?.id, testConnection]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 
@@ -215,7 +210,7 @@ function ChooseConnectionSubstep(props) {
         expanded={expanded}
         onClick={onToggle}
         title={name}
-        valid={testResultLoading ? null : stepConnection?.verified}
+        valid={isTestConnectionPending ? null : stepConnection?.verified}
       />
       <Collapse in={expanded} timeout="auto" unmountOnExit>
         <ListItem
@@ -253,7 +248,7 @@ function ChooseConnectionSubstep(props) {
             onClick={onSubmit}
             sx={{ mt: 2 }}
             disabled={
-              testResultLoading ||
+              isTestConnectionPending ||
               !stepConnection?.verified ||
               editorContext.readOnly
             }

packages/web/src/graphql/queries/test-connection.js

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-export const TEST_CONNECTION = gql`
-  query TestConnection($id: String!) {
-    testConnection(id: $id) {
-      id
-      verified
-    }
-  }
-`;

packages/web/src/hooks/useTestConnection.js

@@ -0,0 +1,19 @@
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useTestConnection(
+  { connectionId },
+  { onSettled } = {},
+) {
+  const query = useMutation({
+    mutationFn: async () => {
+      const { data } = await api.post(`/v1/connections/${connectionId}/test`);
+
+      return data;
+    },
+    onSettled,
+  });
+
+  return query;
+}