refactor: rewrite get executions using useExecutions with RQ

packages/web/src/graphql/queries/get-executions.js

@@ -1,28 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_EXECUTIONS = gql`
-  query GetExecutions($limit: Int!, $offset: Int!) {
-    getExecutions(limit: $limit, offset: $offset) {
-      pageInfo {
-        currentPage
-        totalPages
-      }
-      edges {
-        node {
-          id
-          testRun
-          createdAt
-          updatedAt
-          status
-          flow {
-            id
-            name
-            active
-            steps {
-              iconUrl
-            }
-          }
-        }
-      }
-    }
-  }
-`;

packages/web/src/hooks/useExecutions.js

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useExecutions({ page }, { refetchInterval } = {}) {
+  const query = useQuery({
+    queryKey: ['executions', page],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/executions`, {
+        params: {
+          page,
+        },
+        signal,
+      });
+
+      return data;
+    },
+    refetchInterval,
+  });
+
+  return query;
+}

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

@@ -1,39 +1,33 @@
 import * as React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
+
 import NoResultFound from 'components/NoResultFound';
 import ExecutionRow from 'components/ExecutionRow';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { GET_EXECUTIONS } from 'graphql/queries/get-executions';
-const EXECUTION_PER_PAGE = 10;
-const getLimitAndOffset = (page) => ({
-  limit: EXECUTION_PER_PAGE,
-  offset: (page - 1) * EXECUTION_PER_PAGE,
-});
+import useExecutions from 'hooks/useExecutions';
+
 export default function Executions() {
   const formatMessage = useFormatMessage();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
-  const { data, refetch, loading } = useQuery(GET_EXECUTIONS, {
-    variables: getLimitAndOffset(page),
-    fetchPolicy: 'cache-and-network',
-    pollInterval: 5000,
-  });
-  const getExecutions = data?.getExecutions || {};
-  const { pageInfo, edges } = getExecutions;
-  React.useEffect(() => {
-    refetch(getLimitAndOffset(page));
-  }, [refetch, page]);
-  const executions = edges?.map(({ node }) => node);
+
+  const { data, isLoading: isExecutionsLoading } = useExecutions(
+    { page: page },
+    { refetchInterval: 5000 },
+  );
+
+  const { data: executions, meta: pageInfo } = data || {};
+
   const hasExecutions = executions?.length;
+
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -52,18 +46,18 @@ export default function Executions() {
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
 
-        {loading && (
+        {isExecutionsLoading && (
           <CircularProgress
             data-test="executions-loader"
             sx={{ display: 'block', margin: '20px auto' }}
           />
         )}
 
-        {!loading && !hasExecutions && (
+        {!isExecutionsLoading && !hasExecutions && (
           <NoResultFound text={formatMessage('executions.noExecutions')} />
         )}
 
-        {!loading &&
+        {!isExecutionsLoading &&
           executions?.map((execution) => (
             <ExecutionRow key={execution.id} execution={execution} />
           ))}