refactor: rewrite useFlows as useConnectionFlows and useAppFlows with RQ

packages/backend/src/graphql/queries/get-flows.js

@@ -1,40 +0,0 @@
-import Flow from '../../models/flow.js';
-import paginate from '../../helpers/pagination.js';
-
-const getFlows = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Flow');
-  const userFlows = context.currentUser.$relatedQuery('flows');
-  const allFlows = Flow.query();
-  const baseQuery = conditions.isCreator ? userFlows : allFlows;
-
-  const flowsQuery = baseQuery
-    .clone()
-    .joinRelated({
-      steps: true,
-    })
-    .withGraphFetched({
-      steps: {
-        connection: true,
-      },
-    })
-    .where((builder) => {
-      if (params.connectionId) {
-        builder.where('steps.connection_id', params.connectionId);
-      }
-
-      if (params.name) {
-        builder.where('flows.name', 'ilike', `%${params.name}%`);
-      }
-
-      if (params.appKey) {
-        builder.where('steps.app_key', params.appKey);
-      }
-    })
-    .groupBy('flows.id')
-    .orderBy('active', 'desc')
-    .orderBy('updated_at', 'desc');
-
-  return paginate(flowsQuery, params.limit, params.offset);
-};
-
-export default getFlows;

packages/backend/src/graphql/query-resolvers.js

@@ -7,7 +7,6 @@ import getConnectedApps from './queries/get-connected-apps.js';
 import getDynamicData from './queries/get-dynamic-data.js';
 import getDynamicFields from './queries/get-dynamic-fields.js';
 import getFlow from './queries/get-flow.js';
-import getFlows from './queries/get-flows.js';
 import getNotifications from './queries/get-notifications.js';
 import getStepWithTestExecutions from './queries/get-step-with-test-executions.js';
 import getUsers from './queries/get-users.js';
@@ -23,7 +22,6 @@ const queryResolvers = {
   getDynamicData,
   getDynamicFields,
   getFlow,
-  getFlows,
   getNotifications,
   getStepWithTestExecutions,
   getUsers,

packages/backend/src/graphql/schema.graphql

@@ -5,13 +5,6 @@ type Query {
   getConnectedApps(name: String): [App]
   testConnection(id: String!): Connection
   getFlow(id: String!): Flow
-  getFlows(
-    limit: Int!
-    offset: Int!
-    appKey: String
-    connectionId: String
-    name: String
-  ): FlowConnection
   getStepWithTestExecutions(stepId: String!): [Step]
   getDynamicData(
     stepId: String!
@@ -257,15 +250,6 @@ type Field {
   options: [SubstepArgumentOption]
 }
 
-type FlowConnection {
-  edges: [FlowEdge]
-  pageInfo: PageInfo
-}
-
-type FlowEdge {
-  node: Flow
-}
-
 enum FlowStatus {
   paused
   published

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

@@ -1,7 +1,5 @@
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/client';
 import { Link, useSearchParams } from 'react-router-dom';
-import { GET_FLOWS } from 'graphql/queries/get-flows';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 
@@ -9,31 +7,31 @@ import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useConnectionFlows from 'hooks/useConnectionFlows';
+import useAppFlows from 'hooks/useAppFlows';
 
-const FLOW_PER_PAGE = 10;
-
-const getLimitAndOffset = (page) => ({
-  limit: FLOW_PER_PAGE,
-  offset: (page - 1) * FLOW_PER_PAGE,
-});
 function AppFlows(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
   const [searchParams, setSearchParams] = useSearchParams();
   const connectionId = searchParams.get('connectionId') || undefined;
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
+  const isConnectionFlowEnabled = !!connectionId;
+  const isAppFlowEnabled = !!appKey && !connectionId;
 
-  const { data } = useQuery(GET_FLOWS, {
+  const connectionFlows = useConnectionFlows(
-    variables: {
+    { connectionId, page },
-      appKey,
+    { enabled: isConnectionFlowEnabled },
-      connectionId,
+  );
-      ...getLimitAndOffset(page),
-    },
-  });
 
-  const getFlows = data?.getFlows || {};
+  const appFlows = useAppFlows({ appKey, page }, { enabled: isAppFlowEnabled });
-  const { pageInfo, edges } = getFlows;
+
-  const flows = edges?.map(({ node }) => node);
+  const flows = isConnectionFlowEnabled
+    ? connectionFlows?.data?.data || []
+    : appFlows?.data?.data || [];
+  const pageInfo = isConnectionFlowEnabled
+    ? connectionFlows?.data?.meta || []
+    : appFlows?.data?.meta || [];
   const hasFlows = flows?.length;
 
   if (!hasFlows) {

packages/web/src/graphql/queries/get-flows.js

@@ -1,36 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_FLOWS = gql`
-  query GetFlows(
-    $limit: Int!
-    $offset: Int!
-    $appKey: String
-    $connectionId: String
-    $name: String
-  ) {
-    getFlows(
-      limit: $limit
-      offset: $offset
-      appKey: $appKey
-      connectionId: $connectionId
-      name: $name
-    ) {
-      pageInfo {
-        currentPage
-        totalPages
-      }
-      edges {
-        node {
-          id
-          name
-          createdAt
-          updatedAt
-          active
-          status
-          steps {
-            iconUrl
-          }
-        }
-      }
-    }
-  }
-`;

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(() => {