refactor: rewrite useStepWithTestExecutions with RQ

packages/backend/src/graphql/queries/get-step-with-test-executions.js

@@ -1,34 +0,0 @@
-import { ref } from 'objection';
-import ExecutionStep from '../../models/execution-step.js';
-import Step from '../../models/step.js';
-
-const getStepWithTestExecutions = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('update', 'Flow');
-  const userSteps = context.currentUser.$relatedQuery('steps');
-  const allSteps = Step.query();
-  const stepBaseQuery = conditions.isCreator ? userSteps : allSteps;
-
-  const step = await stepBaseQuery
-    .clone()
-    .findOne({ 'steps.id': params.stepId })
-    .throwIfNotFound();
-
-  const previousStepsWithCurrentStep = await stepBaseQuery
-    .clone()
-    .withGraphJoined('executionSteps')
-    .where('flow_id', '=', step.flowId)
-    .andWhere('position', '<', step.position)
-    .andWhere(
-      'executionSteps.created_at',
-      '=',
-      ExecutionStep.query()
-        .max('created_at')
-        .where('step_id', '=', ref('steps.id'))
-        .andWhere('status', 'success')
-    )
-    .orderBy('steps.position', 'asc');
-
-  return previousStepsWithCurrentStep;
-};
-
-export default getStepWithTestExecutions;

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

@@ -4,7 +4,6 @@ import getAppAuthClients from './queries/get-app-auth-clients.ee.js';
 import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
 import getDynamicData from './queries/get-dynamic-data.js';
-import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import testConnection from './queries/test-connection.js';
 
 const queryResolvers = {
@@ -14,7 +13,6 @@ const queryResolvers = {
   getBillingAndUsage,
   getConnectedApps,
   getDynamicData,
-  getStepWithTestExecutions,
   testConnection,
 };
 

packages/backend/src/graphql/schema.graphql

@@ -4,7 +4,6 @@ type Query {
   getAppAuthClients(appKey: String!, active: Boolean): [AppAuthClient]
   getConnectedApps(name: String): [App]
   testConnection(id: String!): Connection
-  getStepWithTestExecutions(stepId: String!): [Step]
   getDynamicData(
     stepId: String!
     key: String!

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}

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

@@ -4,6 +4,7 @@ import { useMutation } from '@apollo/client';
 
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
+
 import { DELETE_STEP } from 'graphql/mutations/delete-step';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { useQueryClient } from '@tanstack/react-query';
@@ -12,10 +13,7 @@ function FlowStepContextMenu(props) {
   const { stepId, onClose, anchorEl, deletable, flowId } = props;
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
-
-  const [deleteStep] = useMutation(DELETE_STEP, {
-    refetchQueries: ['GetStepWithTestExecutions'],
-  });
+  const [deleteStep] = useMutation(DELETE_STEP);
 
   const deleteActionHandler = React.useCallback(
     async (event) => {

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

@@ -49,7 +49,6 @@ function TestSubstep(props) {
   const [executeFlow, { data, error, loading, called, reset }] = useMutation(
     EXECUTE_FLOW,
     {
-      refetchQueries: ['GetStepWithTestExecutions'],
       context: { autoSnackbar: false },
     },
   );
@@ -85,7 +84,7 @@ function TestSubstep(props) {
     await queryClient.invalidateQueries({
       queryKey: ['flow', flowId],
     });
-  }, [onSubmit, onContinue, isCompleted, step.id, queryClient, flowId]);
+  }, [onSubmit, onContinue, isCompleted, queryClient, flowId]);
 
   const onToggle = expanded ? onCollapse : onExpand;
 

packages/web/src/graphql/queries/get-step-with-test-executions.js

@@ -1,16 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_STEP_WITH_TEST_EXECUTIONS = gql`
-  query GetStepWithTestExecutions($stepId: String!) {
-    getStepWithTestExecutions(stepId: $stepId) {
-      id
-      appKey
-      executionSteps {
-        id
-        executionId
-        stepId
-        status
-        dataOut
-      }
-    }
-  }
-`;

packages/web/src/hooks/useStepWithTestExecutions.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useStepWithTestExecutions(stepId) {
+  const query = useQuery({
+    queryKey: ['stepWithTestExecutions', stepId],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/steps/${stepId}/previous-steps`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: false,
+  });
+
+  return query;
+}