refactor: rewrite get execution using useExecution with RQ

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

@@ -55,8 +55,11 @@ function ExecutionDate(props) {
 }
 
 ExecutionDate.propTypes = {
-  createdAt: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
-    .isRequired,
+  createdAt: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.instanceOf(Date),
+  ]).isRequired,
 };
 
 function ExecutionHeader(props) {

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

@@ -1,16 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_EXECUTION = gql`
-  query GetExecution($executionId: String!) {
-    getExecution(executionId: $executionId) {
-      id
-      testRun
-      createdAt
-      updatedAt
-      flow {
-        id
-        name
-        active
-      }
-    }
-  }
-`;

packages/web/src/hooks/useExecution.js

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

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useParams } from 'react-router-dom';
-import { useQuery } from '@apollo/client';
 import Grid from '@mui/material/Grid';
 import Box from '@mui/material/Box';
 import AlertTitle from '@mui/material/AlertTitle';
@@ -10,16 +9,14 @@ 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 useExecutionSteps from 'hooks/useExecutionSteps';
+import useExecution from 'hooks/useExecution';
 
 export default function Execution() {
   const { executionId } = useParams();
   const formatMessage = useFormatMessage();
 
-  const { data: execution } = useQuery(GET_EXECUTION, {
-    variables: { executionId },
-  });
+  const { data: execution } = useExecution({ executionId });
 
   const {
     data,
@@ -40,7 +37,7 @@ export default function Execution() {
 
   return (
     <Container sx={{ py: 3 }}>
-      <ExecutionHeader execution={execution?.getExecution} />
+      <ExecutionHeader execution={execution?.data} />
 
       <Grid container item sx={{ mt: 2, mb: [2, 5] }} rowGap={3}>
         {!isExecutionStepsLoading && !data?.pages?.[0].data.length && (

packages/web/src/propTypes/propTypes.js

@@ -279,10 +279,12 @@ export const ExecutionPropType = PropTypes.shape({
   executionSteps: PropTypes.arrayOf(ExecutionStepPropType),
   updatedAt: PropTypes.oneOfType([
     PropTypes.string,
+    PropTypes.number,
     PropTypes.instanceOf(Date),
   ]),
   createdAt: PropTypes.oneOfType([
     PropTypes.string,
+    PropTypes.number,
     PropTypes.instanceOf(Date),
   ]),
 });