feat: use REST API endpoint to delete flow

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

@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import { useMutation } from '@apollo/client';
 import Menu from '@mui/material/Menu';
 import MenuItem from '@mui/material/MenuItem';
 import { useQueryClient } from '@tanstack/react-query';
@@ -10,9 +9,9 @@ import { Link } from 'react-router-dom';
 
 import Can from 'components/Can';
 import * as URLS from 'config/urls';
-import { DELETE_FLOW } from 'graphql/mutations/delete-flow';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useDuplicateFlow from 'hooks/useDuplicateFlow';
+import useDeleteFlow from 'hooks/useDeleteFlow';
 
 function ContextMenu(props) {
   const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
@@ -21,7 +20,7 @@ function ContextMenu(props) {
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
   const { mutateAsync: duplicateFlow } = useDuplicateFlow(flowId);
-  const [deleteFlow] = useMutation(DELETE_FLOW);
+  const { mutateAsync: deleteFlow } = useDeleteFlow();
 
   const onFlowDuplicate = React.useCallback(async () => {
     await duplicateFlow();
@@ -52,18 +51,7 @@ function ContextMenu(props) {
   ]);
 
   const onFlowDelete = React.useCallback(async () => {
-    await deleteFlow({
+    await deleteFlow(flowId);
-      variables: { input: { id: flowId } },
-      update: (cache) => {
-        const flowCacheId = cache.identify({
-          __typename: 'Flow',
-          id: flowId,
-        });
-        cache.evict({
-          id: flowCacheId,
-        });
-      },
-    });
 
     if (appKey) {
       await queryClient.invalidateQueries({

packages/web/src/hooks/useDeleteFlow.js

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