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({
-      variables: { input: { id: flowId } },
-    });
+    await duplicateFlow();
 
     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({