refactor: rewrite get execution steps using useExecutionSteps with RQ

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,24 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useExecutionSteps(executionId, page) {
+  const query = useQuery({
+    queryKey: ['executionSteps', executionId, page],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(
+        `/v1/executions/${executionId}/execution-steps`,
+        {
+          params: {
+            page: page,
+          },
+          signal,
+        },
+      );
+
+      return data;
+    },
+  });
+
+  return query;
+}

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

@@ -5,34 +5,35 @@ 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';
-const EXECUTION_PER_PAGE = 100;
-const getLimitAndOffset = (page) => ({
-  limit: EXECUTION_PER_PAGE,
-  offset: (page - 1) * EXECUTION_PER_PAGE,
-});
+import useExecutionSteps from 'hooks/useExecutionSteps';
+
 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 { edges } = data?.getExecutionSteps || {};
-  const executionSteps = edges?.map((edge) => edge.node);
+
+  const { data, isLoading: isExecutionLoading } = useExecutionSteps(
+    executionId,
+    1,
+  );
+
+  const executionSteps = data?.data;
+
   return (
     <Container sx={{ py: 3 }}>
       <ExecutionHeader execution={execution?.getExecution} />
 
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
-        {!loading && !executionSteps?.length && (
+        {!isExecutionLoading && !executionSteps?.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
             <AlertTitle sx={{ fontWeight: 700 }}>
               {formatMessage('execution.noDataTitle')}

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,
-  updatedAt: PropTypes.string,
+  createdAt: PropTypes.number,
+  updatedAt: PropTypes.number,
 });
 
 export const FlowPropType = PropTypes.shape({