refactor(web): rewrite mutation with PATCH /v1/flows/:flowId

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

@@ -17,10 +17,10 @@ import Editor from 'components/Editor';
 import Can from 'components/Can';
 import useFormatMessage from 'hooks/useFormatMessage';
 import { UPDATE_FLOW_STATUS } from 'graphql/mutations/update-flow-status';
-import { UPDATE_FLOW } from 'graphql/mutations/update-flow';
 import * as URLS from 'config/urls';
 import { TopBar } from './style';
 import useFlow from 'hooks/useFlow';
+import useUpdateFlow from 'hooks/useUpdateFlow';
 import { useQueryClient } from '@tanstack/react-query';
 import EditorNew from 'components/EditorNew/EditorNew';
 
@@ -29,29 +29,17 @@ const useNewFlowEditor = process.env.REACT_APP_USE_NEW_FLOW_EDITOR === 'true';
 export default function EditorLayout() {
   const { flowId } = useParams();
   const formatMessage = useFormatMessage();
-  const [updateFlow] = useMutation(UPDATE_FLOW);
+  const { mutateAsync: updateFlow } = useUpdateFlow(flowId);
   const [updateFlowStatus] = useMutation(UPDATE_FLOW_STATUS);
   const { data, isLoading: isFlowLoading } = useFlow(flowId);
   const flow = data?.data;
   const queryClient = useQueryClient();
 
-  const onFlowNameUpdate = React.useCallback(
+  const onFlowNameUpdate = async (name) => {
-    async (name) => {
+    await updateFlow({
-      try {
+      name,
-        await updateFlow({
+    });
-          variables: {
+  };
-            input: {
-              id: flowId,
-              name,
-            },
-          },
-        });
-
-        await queryClient.invalidateQueries({ queryKey: ['flows', flowId] });
-      } catch (e) {}
-    },
-    [flowId, queryClient],
-  );
 
   const onFlowStatusUpdate = React.useCallback(
     async (active) => {

packages/web/src/graphql/mutations/update-flow.js

@@ -1,9 +0,0 @@
-import { gql } from '@apollo/client';
-export const UPDATE_FLOW = gql`
-  mutation UpdateFlow($input: UpdateFlowInput) {
-    updateFlow(input: $input) {
-      id
-      name
-    }
-  }
-`;

packages/web/src/hooks/useUpdateFlow.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useUpdateFlow(flowId) {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.patch(`/v1/flows/${flowId}`, payload);
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['flows', flowId],
+      });
+    },
+  });
+
+  return query;
+}