refactor(Flows): utilize useQuery over useMutation

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

@@ -16,8 +16,7 @@ import useExportFlow from 'hooks/useExportFlow';
 import useDownloadJsonAsFile from 'hooks/useDownloadJsonAsFile';
 
 function ContextMenu(props) {
-  const { flowId, onClose, anchorEl, onDuplicateFlow, onDeleteFlow, appKey } =
-    props;
+  const { flowId, onClose, anchorEl, onDuplicateFlow, appKey } = props;
   const enqueueSnackbar = useEnqueueSnackbar();
   const formatMessage = useFormatMessage();
   const queryClient = useQueryClient();
@@ -67,14 +66,12 @@ function ContextMenu(props) {
       variant: 'success',
     });
 
-    onDeleteFlow?.();
     onClose();
   }, [
     deleteFlow,
     appKey,
     enqueueSnackbar,
     formatMessage,
-    onDeleteFlow,
     onClose,
     queryClient,
   ]);
@@ -143,7 +140,6 @@ ContextMenu.propTypes = {
     PropTypes.func,
     PropTypes.shape({ current: PropTypes.instanceOf(Element) }),
   ]).isRequired,
-  onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
   appKey: PropTypes.string,
 };

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

@@ -37,7 +37,7 @@ function FlowRow(props) {
   const formatMessage = useFormatMessage();
   const contextButtonRef = React.useRef(null);
   const [anchorEl, setAnchorEl] = React.useState(null);
-  const { flow, onDuplicateFlow, onDeleteFlow, appKey } = props;
+  const { flow, onDuplicateFlow, appKey } = props;
 
   const handleClose = () => {
     setAnchorEl(null);
@@ -118,7 +118,6 @@ function FlowRow(props) {
           flowId={flow.id}
           onClose={handleClose}
           anchorEl={anchorEl}
-          onDeleteFlow={onDeleteFlow}
           onDuplicateFlow={onDuplicateFlow}
           appKey={appKey}
         />
@@ -129,7 +128,6 @@ function FlowRow(props) {
 
 FlowRow.propTypes = {
   flow: FlowPropType.isRequired,
-  onDeleteFlow: PropTypes.func,
   onDuplicateFlow: PropTypes.func,
   appKey: PropTypes.string,
 };

packages/web/src/hooks/useDeleteFlow.js

@@ -12,8 +12,8 @@ export default function useDeleteFlow(flowId) {
       return data;
     },
 
-    onSuccess: () => {
-      queryClient.invalidateQueries({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
         queryKey: ['flows'],
       });
     },

packages/web/src/hooks/useDuplicateFlow.js

@@ -12,8 +12,8 @@ export default function useDuplicateFlow(flowId) {
       return data;
     },
 
-    onSuccess: () => {
-      queryClient.invalidateQueries({
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
         queryKey: ['flows'],
       });
     },

packages/web/src/hooks/useFlows.js

@@ -0,0 +1,18 @@
+import api from 'helpers/api';
+import { useQuery } from '@tanstack/react-query';
+
+export default function useFlows({ flowName, page }) {
+  const query = useQuery({
+    queryKey: ['flows', flowName, { page }],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/flows', {
+        params: { name: flowName, page },
+        signal,
+      });
+
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useLazyFlows.js

@@ -1,30 +0,0 @@
-import * as React from 'react';
-
-import api from 'helpers/api';
-import { useMutation } from '@tanstack/react-query';
-
-export default function useLazyFlows({ flowName, page }, { onSettled }) {
-  const abortControllerRef = React.useRef(new AbortController());
-
-  React.useEffect(() => {
-    abortControllerRef.current = new AbortController();
-
-    return () => {
-      abortControllerRef.current?.abort();
-    };
-  }, [flowName]);
-
-  const query = useMutation({
-    mutationFn: async () => {
-      const { data } = await api.get('/v1/flows', {
-        params: { name: flowName, page },
-        signal: abortControllerRef.current.signal,
-      });
-
-      return data;
-    },
-    onSettled,
-  });
-
-  return query;
-}

packages/web/src/pages/Flows/index.jsx

@@ -6,7 +6,6 @@ import {
   Routes,
   Route,
 } from 'react-router-dom';
-import debounce from 'lodash/debounce';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import AddIcon from '@mui/icons-material/Add';
@@ -27,7 +26,7 @@ import ImportFlowDialog from 'components/ImportFlowDialog';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
 import * as URLS from 'config/urls';
-import useLazyFlows from 'hooks/useLazyFlows';
+import useFlows from 'hooks/useFlows';
 
 export default function Flows() {
   const formatMessage = useFormatMessage();
@@ -35,21 +34,9 @@ export default function Flows() {
   const [searchParams, setSearchParams] = useSearchParams();
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
   const flowName = searchParams.get('flowName') || '';
-  const [isLoading, setIsLoading] = React.useState(true);
   const currentUserAbility = useCurrentUserAbility();
 
-  const {
-    data,
-    mutate: fetchFlows,
-    isSuccess,
-  } = useLazyFlows(
-    { flowName, page },
-    {
-      onSettled: () => {
-        setIsLoading(false);
-      },
-    },
-  );
+  const { data, isSuccess, isLoading } = useFlows({ flowName, page });
 
   const flows = data?.data || [];
   const pageInfo = data?.meta;
@@ -76,26 +63,9 @@ export default function Flows() {
   const onDuplicateFlow = () => {
     if (pageInfo?.currentPage > 1) {
       navigate(getPathWithSearchParams(1, flowName));
-    } else {
-      fetchFlows();
     }
   };
 
-  const fetchData = React.useMemo(
-    () => debounce(fetchFlows, 300),
-    [fetchFlows],
-  );
-
-  React.useEffect(() => {
-    setIsLoading(true);
-
-    fetchData({ flowName, page });
-
-    return () => {
-      fetchData.cancel();
-    };
-  }, [fetchData, flowName, page]);
-
   React.useEffect(
     function redirectToLastPage() {
       if (navigateToLastPage) {
@@ -184,7 +154,6 @@ export default function Flows() {
                 key={flow.id}
                 flow={flow}
                 onDuplicateFlow={onDuplicateFlow}
-                onDeleteFlow={fetchFlows}
               />
             ))}