feat(web): use REST API endpoint to update step

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

@@ -1,18 +1,17 @@
 import * as React from 'react';
-import { useMutation } from '@apollo/client';
 import Box from '@mui/material/Box';
 import IconButton from '@mui/material/IconButton';
 import AddIcon from '@mui/icons-material/Add';
 
 import useCreateStep from 'hooks/useCreateStep';
-import { UPDATE_STEP } from 'graphql/mutations/update-step';
+import useUpdateStep from 'hooks/useUpdateStep';
 import FlowStep from 'components/FlowStep';
 import { FlowPropType } from 'propTypes/propTypes';
 import { useQueryClient } from '@tanstack/react-query';
 
 function Editor(props) {
-  const [updateStep] = useMutation(UPDATE_STEP);
   const { flow } = props;
+  const { mutateAsync: updateStep } = useUpdateStep();
   const { mutateAsync: createStep, isPending: isCreateStepPending } =
     useCreateStep(flow?.id);
   const [triggerStep] = flow.steps;
@@ -21,29 +20,24 @@ function Editor(props) {
 
   const onStepChange = React.useCallback(
     async (step) => {
-      const mutationInput = {
+      const payload = {
         id: step.id,
         key: step.key,
         parameters: step.parameters,
-        connection: {
+        connectionId: step.connection?.id,
-          id: step.connection?.id,
-        },
-        flow: {
-          id: flow.id,
-        },
       };
 
       if (step.appKey) {
-        mutationInput.appKey = step.appKey;
+        payload.appKey = step.appKey;
       }
 
-      await updateStep({ variables: { input: mutationInput } });
+      await updateStep(payload);
+
       await queryClient.invalidateQueries({
         queryKey: ['steps', step.id, 'connection'],
       });
-      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
-    [updateStep, flow.id, queryClient],
+    [updateStep, queryClient],
   );
 
   const addStep = React.useCallback(

packages/web/src/components/EditorNew/EditorNew.jsx

@@ -5,8 +5,8 @@ import { FlowPropType } from 'propTypes/propTypes';
 import ReactFlow, { useNodesState, useEdgesState } from 'reactflow';
 import 'reactflow/dist/style.css';
 
-import { UPDATE_STEP } from 'graphql/mutations/update-step';
 import useCreateStep from 'hooks/useCreateStep';
+import useUpdateStep from 'hooks/useUpdateStep';
 
 import { useAutoLayout } from './useAutoLayout';
 import { useScrollBoundaries } from './useScrollBoundaries';
@@ -35,7 +35,7 @@ const edgeTypes = {
 };
 
 const EditorNew = ({ flow }) => {
-  const [updateStep] = useMutation(UPDATE_STEP);
+  const { mutateAsync: updateStep } = useUpdateStep();
   const queryClient = useQueryClient();
 
   const { mutateAsync: createStep, isPending: isCreateStepPending } =
@@ -84,31 +84,24 @@ const EditorNew = ({ flow }) => {
 
   const onStepChange = useCallback(
     async (step) => {
-      const mutationInput = {
+      const payload = {
         id: step.id,
         key: step.key,
         parameters: step.parameters,
-        connection: {
+        connectionId: step.connection?.id,
-          id: step.connection?.id,
-        },
-        flow: {
-          id: flow.id,
-        },
       };
 
       if (step.appKey) {
-        mutationInput.appKey = step.appKey;
+        payload.appKey = step.appKey;
       }
 
-      await updateStep({
+      await updateStep(payload);
-        variables: { input: mutationInput },
+
-      });
       await queryClient.invalidateQueries({
         queryKey: ['steps', step.id, 'connection'],
       });
-      await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
     },
-    [flow.id, updateStep, queryClient],
+    [updateStep, queryClient],
   );
 
   const onAddStep = useCallback(

packages/web/src/hooks/useUpdateStep.js

@@ -0,0 +1,28 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useUpdateStep() {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async ({ id, appKey, key, connectionId, parameters }) => {
+      const { data } = await api.patch(`/v1/steps/${id}`, {
+        appKey,
+        key,
+        connectionId,
+        parameters,
+      });
+
+      return data;
+    },
+
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows'],
+      });
+    },
+  });
+
+  return query;
+}