feat: use useInfinityQuery instead of useQuery in useExecutionSteps

packages/web/src/hooks/useExecutionSteps.js

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

@@ -21,19 +21,29 @@ export default function Execution() {
     variables: { executionId },
   });
 
-  const { data, isLoading: isExecutionLoading } = useExecutionSteps(
+  const {
-    executionId,
+    data,
-    1,
+    isLoading: isExecutionStepsLoading,
-  );
+    fetchNextPage,
+    hasNextPage,
+    isFetching,
+    isFetchingNextPage,
+  } = useExecutionSteps({
+    executionId: executionId,
+  });
 
-  const executionSteps = data?.data;
+  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}>
-        {!isExecutionLoading && !executionSteps?.length && (
+        {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (
           <Alert severity="warning" sx={{ flex: 1 }}>
             <AlertTitle sx={{ fontWeight: 700 }}>
               {formatMessage('execution.noDataTitle')}
@@ -45,12 +55,16 @@ export default function Execution() {
           </Alert>
         )}
 
-        {executionSteps?.map((executionStep) => (
+        {data?.pages?.map((group, i) => (
-          <ExecutionStep
+          <React.Fragment key={i}>
-            key={executionStep.id}
+            {group?.data?.map((executionStep) => (
-            executionStep={executionStep}
+              <ExecutionStep
-            step={executionStep.step}
+                key={executionStep.id}
-          />
+                executionStep={executionStep}
+                step={executionStep.step}
+              />
+            ))}
+          </React.Fragment>
         ))}
       </Grid>
     </Container>