refactor: rewrite test connection with RQ

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 &&
-                  !testLoading &&
+                  !isTestConnectionPending &&
                   verified && (
                     <>
                       <CheckCircleIcon fontSize="small" color="success" />
@@ -133,8 +131,7 @@ function AppConnectionRow(props) {
                     </>
                   )}
                 {verificationVisible &&
-                  testCalled &&
-                  !testLoading &&
+                  !isTestConnectionPending &&
                   !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,14 +71,10 @@ function ChooseConnectionSubstep(props) {
   const stepConnection = stepConnectionData?.data;
 
   // TODO: show detailed error when connection test/verification fails
-  const [
-    testConnection,
-    { loading: testResultLoading, refetch: retestConnection },
-  ] = useLazyQuery(TEST_CONNECTION, {
-    variables: {
-      id: stepConnection?.id,
-    },
-  });
+  const { mutate: testConnection, isPending: isTestConnectionPending } =
+    useTestConnection({
+      connectionId: stepConnection?.id,
+    });
 
   React.useEffect(() => {
     if (stepConnection?.id) {
@@ -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
             }