refactor(Flows): utilize useQuery over useMutation

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;
-}