Merge pull request #1711 from automatisch/AUT-691

refactor: rewrite get execution steps using useExecutionSteps with RQ

packages/backend/src/graphql/queries/get-execution-steps.js

@@ -1,27 +0,0 @@
-import paginate from '../../helpers/pagination.js';
-import Execution from '../../models/execution.js';
-
-const getExecutionSteps = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Execution');
-  const userExecutions = context.currentUser.$relatedQuery('executions');
-  const allExecutions = Execution.query();
-  const executionBaseQuery = conditions.isCreator
-    ? userExecutions
-    : allExecutions;
-
-  const execution = await executionBaseQuery
-    .clone()
-    .withSoftDeleted()
-    .findById(params.executionId)
-    .throwIfNotFound();
-
-  const executionSteps = execution
-    .$relatedQuery('executionSteps')
-    .withSoftDeleted()
-    .withGraphFetched('step')
-    .orderBy('created_at', 'asc');
-
-  return paginate(executionSteps, params.limit, params.offset);
-};
-
-export default getExecutionSteps;

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

@@ -8,7 +8,6 @@ import getCurrentUser from './queries/get-current-user.js';
 import getDynamicData from './queries/get-dynamic-data.js';
 import getDynamicFields from './queries/get-dynamic-fields.js';
 import getExecution from './queries/get-execution.js';
-import getExecutionSteps from './queries/get-execution-steps.js';
 import getExecutions from './queries/get-executions.js';
 import getFlow from './queries/get-flow.js';
 import getFlows from './queries/get-flows.js';
@@ -42,7 +41,6 @@ const queryResolvers = {
   getDynamicFields,
   getExecution,
   getExecutions,
-  getExecutionSteps,
   getFlow,
   getFlows,
   getInvoices,

packages/backend/src/graphql/schema.graphql

@@ -19,11 +19,6 @@ type Query {
     offset: Int!
     filters: ExecutionFiltersInput
   ): ExecutionConnection
-  getExecutionSteps(
-    executionId: String!
-    limit: Int!
-    offset: Int!
-  ): ExecutionStepConnection
   getDynamicData(
     stepId: String!
     key: String!

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

@@ -66,7 +66,7 @@ function ExecutionStepDate(props) {
 }
 
 ExecutionStepDate.propTypes = {
-  createdAt: PropTypes.string.isRequired,
+  createdAt: PropTypes.number.isRequired,
 };
 
 const validIcon = <CheckCircleIcon color="success" />;

packages/web/src/graphql/queries/get-execution-steps.js

@@ -1,34 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_EXECUTION_STEPS = gql`
-  query GetExecutionSteps($executionId: String!, $limit: Int!, $offset: Int!) {
-    getExecutionSteps(
-      executionId: $executionId
-      limit: $limit
-      offset: $offset
-    ) {
-      pageInfo {
-        currentPage
-        totalPages
-      }
-      edges {
-        node {
-          id
-          executionId
-          status
-          dataIn
-          dataOut
-          errorDetails
-          createdAt
-          updatedAt
-          step {
-            id
-            appKey
-            type
-            status
-            position
-          }
-        }
-      }
-    }
-  }
-`;

packages/web/src/hooks/useExecutionSteps.js

@@ -0,0 +1,29 @@
+import { useInfiniteQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useExecutionSteps({ executionId }) {
+  const query = useInfiniteQuery({
+    queryKey: ['executionSteps', executionId],
+    queryFn: async ({ pageParam = 1, signal }) => {
+      const { data } = await api.get(
+        `/v1/executions/${executionId}/execution-steps`,
+        {
+          params: {
+            page: pageParam,
+          },
+          signal,
+        },
+      );
+
+      return data;
+    },
+    initialPageParam: 1,
+    getNextPageParam: (lastPage) =>
+      lastPage?.meta?.currentPage < lastPage?.meta?.totalPages
+        ? lastPage?.meta?.currentPage + 1
+        : null,
+  });
+
+  return query;
+}

packages/web/src/pages/Execution/index.jsx

@@ -5,34 +5,45 @@ import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import AlertTitle from '@mui/material/AlertTitle';
 import Alert from '@mui/material/Alert';
+
 import useFormatMessage from 'hooks/useFormatMessage';
 import ExecutionHeader from 'components/ExecutionHeader';
 import ExecutionStep from 'components/ExecutionStep';
 import Container from 'components/Container';
 import { GET_EXECUTION } from 'graphql/queries/get-execution';
-import { GET_EXECUTION_STEPS } from 'graphql/queries/get-execution-steps';
+import useExecutionSteps from 'hooks/useExecutionSteps';
-const EXECUTION_PER_PAGE = 100;
+
-const getLimitAndOffset = (page) => ({
-  limit: EXECUTION_PER_PAGE,
-  offset: (page - 1) * EXECUTION_PER_PAGE,
-});
 export default function Execution() {
   const { executionId } = useParams();
   const formatMessage = useFormatMessage();
+
   const { data: execution } = useQuery(GET_EXECUTION, {
     variables: { executionId },
   });
-  const { data, loading } = useQuery(GET_EXECUTION_STEPS, {
+
-    variables: { executionId, ...getLimitAndOffset(1) },
+  const {
+    data,
+    isLoading: isExecutionStepsLoading,
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useExecutionSteps({
+    executionId: executionId,
   });
-  const { edges } = data?.getExecutionSteps || {};
+
-  const executionSteps = edges?.map((edge) => edge.node);
+  React.useEffect(() => {
+    if (!isFetching && !isFetchingNextPage && hasNextPage) {
+      fetchNextPage();
+    }
+  }, [isFetching, isFetchingNextPage, hasNextPage, fetchNextPage]);
+
   return (
     <Container sx={{ py: 3 }}>
       <ExecutionHeader execution={execution?.getExecution} />
 
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
-        {!loading && !executionSteps?.length && (
+        {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
             <AlertTitle sx={{ fontWeight: 700 }}>
               {formatMessage('execution.noDataTitle')}
@@ -44,13 +55,17 @@ export default function Execution() {
           </Alert>
         )}
 
-        {executionSteps?.map((executionStep) => (
+        {data?.pages?.map((group, i) => (
+          <React.Fragment key={i}>
+            {group?.data?.map((executionStep) => (
               <ExecutionStep
                 key={executionStep.id}
                 executionStep={executionStep}
                 step={executionStep.step}
               />
             ))}
+          </React.Fragment>
+        ))}
       </Grid>
     </Container>
   );

packages/web/src/propTypes/propTypes.js

@@ -225,8 +225,8 @@ export const ExecutionStepPropType = PropTypes.shape({
   dataOut: PropTypes.object,
   errorDetails: PropTypes.object,
   status: PropTypes.string,
-  createdAt: PropTypes.string,
+  createdAt: PropTypes.number,
-  updatedAt: PropTypes.string,
+  updatedAt: PropTypes.number,
 });
 
 export const FlowPropType = PropTypes.shape({