refactor: rewrite useStepWithTestExecutions with RQ

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

@@ -1,6 +1,5 @@
 import PropTypes from 'prop-types';
 import * as React from 'react';
-import { useLazyQuery } from '@apollo/client';
 import Stack from '@mui/material/Stack';
 import Typography from '@mui/material/Typography';
 import Box from '@mui/material/Box';
@@ -24,7 +23,7 @@ import ChooseConnectionSubstep from 'components/ChooseConnectionSubstep';
 import Form from 'components/Form';
 import FlowStepContextMenu from 'components/FlowStepContextMenu';
 import AppIcon from 'components/AppIcon';
-import { GET_STEP_WITH_TEST_EXECUTIONS } from 'graphql/queries/get-step-with-test-executions';
+
 import useFormatMessage from 'hooks/useFormatMessage';
 import useApps from 'hooks/useApps';
 import {
@@ -40,6 +39,7 @@ import useTriggers from 'hooks/useTriggers';
 import useActions from 'hooks/useActions';
 import useTriggerSubsteps from 'hooks/useTriggerSubsteps';
 import useActionSubsteps from 'hooks/useActionSubsteps';
+import useStepWithTestExecutions from 'hooks/useStepWithTestExecutions';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -126,28 +126,16 @@ function FlowStep(props) {
 
   const { data: apps } = useApps(useAppsOptions);
 
-  const [
-    getStepWithTestExecutions,
-    { data: stepWithTestExecutionsData, called: stepWithTestExecutionsCalled },
-  ] = useLazyQuery(GET_STEP_WITH_TEST_EXECUTIONS, {
-    fetchPolicy: 'network-only',
-  });
+  const { data: stepWithTestExecutions, refetch } = useStepWithTestExecutions(
+    step.id,
+  );
+  const stepWithTestExecutionsData = stepWithTestExecutions?.data;
 
   React.useEffect(() => {
-    if (!stepWithTestExecutionsCalled && !collapsed && !isTrigger) {
-      getStepWithTestExecutions({
-        variables: {
-          stepId: step.id,
-        },
-      });
+    if (!collapsed && !isTrigger) {
+      refetch(step.id);
     }
-  }, [
-    collapsed,
-    stepWithTestExecutionsCalled,
-    getStepWithTestExecutions,
-    step.id,
-    isTrigger,
-  ]);
+  }, [collapsed, refetch, step.id, isTrigger]);
 
   const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
 
@@ -274,9 +262,7 @@ function FlowStep(props) {
       <Collapse in={!collapsed} unmountOnExit>
         <Content>
           <List>
-            <StepExecutionsProvider
-              value={stepWithTestExecutionsData?.getStepWithTestExecutions}
-            >
+            <StepExecutionsProvider value={stepWithTestExecutionsData}>
               <Form
                 defaultValues={step}
                 onSubmit={handleSubmit}