diff --git a/packages/web/src/components/Editor/index.jsx b/packages/web/src/components/Editor/index.jsx
index 0995d300..51de3de9 100644
--- a/packages/web/src/components/Editor/index.jsx
+++ b/packages/web/src/components/Editor/index.jsx
@@ -4,7 +4,7 @@ import Box from '@mui/material/Box';
import IconButton from '@mui/material/IconButton';
import AddIcon from '@mui/icons-material/Add';
-import { CREATE_STEP } from 'graphql/mutations/create-step';
+import useCreateStep from 'hooks/useCreateStep';
import { UPDATE_STEP } from 'graphql/mutations/update-step';
import FlowStep from 'components/FlowStep';
import { FlowPropType } from 'propTypes/propTypes';
@@ -12,9 +12,9 @@ import { useQueryClient } from '@tanstack/react-query';
function Editor(props) {
const [updateStep] = useMutation(UPDATE_STEP);
- const [createStep, { loading: creationInProgress }] =
- useMutation(CREATE_STEP);
const { flow } = props;
+ const { mutateAsync: createStep, isPending: isCreateStepPending } =
+ useCreateStep(flow?.id);
const [triggerStep] = flow.steps;
const [currentStepId, setCurrentStepId] = React.useState(triggerStep.id);
const queryClient = useQueryClient();
@@ -48,24 +48,13 @@ function Editor(props) {
const addStep = React.useCallback(
async (previousStepId) => {
- const mutationInput = {
- previousStep: {
- id: previousStepId,
- },
- flow: {
- id: flow.id,
- },
- };
-
- const createdStep = await createStep({
- variables: { input: mutationInput },
+ const { data: createdStep } = await createStep({
+ previousStepId,
});
- const createdStepId = createdStep.data.createStep.id;
- setCurrentStepId(createdStepId);
- await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
+ setCurrentStepId(createdStep.id);
},
- [createStep, flow.id, queryClient],
+ [createStep],
);
const openNextStep = React.useCallback((nextStep) => {
@@ -101,7 +90,7 @@ function Editor(props) {
addStep(step.id)}
color="primary"
- disabled={creationInProgress || flow.active}
+ disabled={isCreateStepPending || flow.active}
>
diff --git a/packages/web/src/components/EditorNew/EditorNew.jsx b/packages/web/src/components/EditorNew/EditorNew.jsx
index 73d29c51..2ad2db92 100644
--- a/packages/web/src/components/EditorNew/EditorNew.jsx
+++ b/packages/web/src/components/EditorNew/EditorNew.jsx
@@ -4,8 +4,9 @@ import { useQueryClient } from '@tanstack/react-query';
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 { CREATE_STEP } from 'graphql/mutations/create-step';
+import useCreateStep from 'hooks/useCreateStep';
import { useAutoLayout } from './useAutoLayout';
import { useScrollBoundaries } from './useScrollBoundaries';
@@ -36,8 +37,9 @@ const edgeTypes = {
const EditorNew = ({ flow }) => {
const [updateStep] = useMutation(UPDATE_STEP);
const queryClient = useQueryClient();
- const [createStep, { loading: stepCreationInProgress }] =
- useMutation(CREATE_STEP);
+
+ const { mutateAsync: createStep, isPending: isCreateStepPending } =
+ useCreateStep(flow?.id);
const [nodes, setNodes, onNodesChange] = useNodesState(
generateInitialNodes(flow),
@@ -111,26 +113,13 @@ const EditorNew = ({ flow }) => {
const onAddStep = useCallback(
async (previousStepId) => {
- const mutationInput = {
- previousStep: {
- id: previousStepId,
- },
- flow: {
- id: flow.id,
- },
- };
+ const { data: createdStep } = await createStep({ previousStepId });
- const {
- data: { createStep: createdStep },
- } = await createStep({
- variables: { input: mutationInput },
- });
+ console.log('CHECK THIS OUT!', createdStep);
- const createdStepId = createdStep.id;
- await queryClient.invalidateQueries({ queryKey: ['flows', flow.id] });
- createdStepIdRef.current = createdStepId;
+ createdStepIdRef.current = createdStep.id;
},
- [flow.id, createStep, queryClient],
+ [createStep],
);
useEffect(() => {
@@ -260,7 +249,7 @@ const EditorNew = ({ flow }) => {
>
{
+ const { data } = await api.post(`/v1/flows/${flowId}/steps`, {
+ previousStepId,
+ });
+
+ return data;
+ },
+
+ onSuccess: () => {
+ queryClient.invalidateQueries({
+ queryKey: ['flows', flowId],
+ });
+ },
+ });
+
+ return query;
+}