refactor: rewrite get execution using useExecution with RQ

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

@@ -1,25 +0,0 @@
-import Execution from '../../models/execution.js';
-
-const getExecution = 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()
-    .withGraphFetched({
-      flow: {
-        steps: true,
-      },
-    })
-    .withSoftDeleted()
-    .findById(params.executionId)
-    .throwIfNotFound();
-
-  return execution;
-};
-
-export default getExecution;

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

@@ -7,7 +7,6 @@ import getConnectedApps from './queries/get-connected-apps.js';
 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 getExecutions from './queries/get-executions.js';
 import getFlow from './queries/get-flow.js';
 import getFlows from './queries/get-flows.js';
@@ -39,7 +38,6 @@ const queryResolvers = {
   getCurrentUser,
   getDynamicData,
   getDynamicFields,
-  getExecution,
   getExecutions,
   getFlow,
   getFlows,

packages/backend/src/graphql/schema.graphql

@@ -13,7 +13,6 @@ type Query {
     name: String
   ): FlowConnection
   getStepWithTestExecutions(stepId: String!): [Step]
-  getExecution(executionId: String!): Execution
   getExecutions(
     limit: Int!
     offset: Int!

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

@@ -55,8 +55,11 @@ function ExecutionDate(props) {
 }
 
 ExecutionDate.propTypes = {
-  createdAt: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)])
+  createdAt: PropTypes.oneOfType([
-    .isRequired,
+    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, {
+  const { data: execution } = useExecution({ executionId });
-    variables: { 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),
   ]),
 });