feat: use REST API endpoint to duplicate flow

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

@@ -13,6 +13,7 @@ import * as URLS from 'config/urls';
 import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import { DUPLICATE_FLOW } from 'graphql/mutations/duplicate-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useDuplicateFlow from 'hooks/useDuplicateFlow';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -20,13 +21,11 @@ function ContextMenu(props) {
   const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
-  const [duplicateFlow] = useMutation(DUPLICATE_FLOW);
+  const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
   const [deleteFlow] = useMutation(DELETE_FLOW);
 
   const onFlowDuplicate = React.useCallback(async () => {
-    await duplicateFlow({
+    await duplicateFlow();
-      variables: { input: { id: flowId } },
-    });
 
     if (appKey) {
       await queryClient.invalidateQueries({
@@ -43,7 +42,15 @@ function ContextMenu(props) {
 
     onDuplicateFlow?.();
     onClose();
-  }, [flowId, onClose, duplicateFlow, queryClient, onDuplicateFlow]);
+  }, [
+    appKey,
+    enqueueSnackbar,
+    onClose,
+    duplicateFlow,
+    queryClient,
+    onDuplicateFlow,
+    formatMessage,
+  ]);
 
   const onFlowDelete = React.useCallback(async () => {
     await deleteFlow({

packages/web/src/hooks/useDuplicateFlow.js

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