refactor: rewrite useFlows as useConnectionFlows and useAppFlows with RQ

packages/web/src/hooks/useAppFlows.js

@@ -0,0 +1,22 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAppFlows({ appKey, page }, { enabled }) {
+  const query = useQuery({
+    queryKey: ['appFlows', appKey, page],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/flows`, {
+        params: {
+          page,
+        },
+        signal,
+      });
+
+      return data;
+    },
+    enabled,
+  });
+
+  return query;
+}

packages/web/src/hooks/useConnectionFlows.js

@@ -0,0 +1,25 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useConnectionFlows(
+  { connectionId, page },
+  { enabled },
+) {
+  const query = useQuery({
+    queryKey: ['connectionFlows', connectionId, page],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/connections/${connectionId}/flows`, {
+        params: {
+          page,
+        },
+        signal,
+      });
+
+      return data;
+    },
+    enabled,
+  });
+
+  return query;
+}

packages/web/src/hooks/useLazyFlows.js

@@ -3,7 +3,7 @@ import * as React from 'react';
 import api from 'helpers/api';
 import { useMutation } from '@tanstack/react-query';
 
-export default function useFlows({ flowName, page }, { onSuccess }) {
+export default function useLazyFlows({ flowName, page }, { onSuccess }) {
   const abortControllerRef = React.useRef(new AbortController());
 
   React.useEffect(() => {