feat: introduce useLazyFlows with RQ

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

@@ -4,11 +4,14 @@ 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';
+
 import * as URLS from 'config/urls';
 import AppFlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
+
 const FLOW_PER_PAGE = 10;
+
 const getLimitAndOffset = (page) => ({
   limit: FLOW_PER_PAGE,
   offset: (page - 1) * FLOW_PER_PAGE,
@@ -19,6 +22,7 @@ function AppFlows(props) {
   const [searchParams, setSearchParams] = useSearchParams();
   const connectionId = searchParams.get('connectionId') || undefined;
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
+
   const { data } = useQuery(GET_FLOWS, {
     variables: {
       appKey,
@@ -26,10 +30,12 @@ function AppFlows(props) {
       ...getLimitAndOffset(page),
     },
   });
+
   const getFlows = data?.getFlows || {};
   const { pageInfo, edges } = getFlows;
   const flows = edges?.map(({ node }) => node);
   const hasFlows = flows?.length;
+
   if (!hasFlows) {
     return (
       <NoResultFound
@@ -39,6 +45,7 @@ function AppFlows(props) {
       />
     );
   }
+
   return (
     <>
       {flows?.map((appFlow) => (

packages/web/src/hooks/useLazyFlows.js

@@ -0,0 +1,30 @@
+import * as React from 'react';
+
+import api from 'helpers/api';
+import { useMutation } from '@tanstack/react-query';
+
+export default function useFlows({ flowName, page }, { onSuccess }) {
+  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;
+    },
+    onSuccess,
+  });
+
+  return query;
+}

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
-import { useLazyQuery } from '@apollo/client';
 import debounce from 'lodash/debounce';
 import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
@@ -9,6 +8,7 @@ import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
+
 import Can from 'components/Can';
 import FlowRow from 'components/FlowRow';
 import NoResultFound from 'components/NoResultFound';
@@ -17,45 +17,37 @@ import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
 import SearchInput from 'components/SearchInput';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { GET_FLOWS } from 'graphql/queries/get-flows';
 import * as URLS from 'config/urls';
-const FLOW_PER_PAGE = 10;
+import useLazyFlows from 'hooks/useLazyFlows';
-const getLimitAndOffset = (page) => ({
+
-  limit: FLOW_PER_PAGE,
-  offset: (page - 1) * FLOW_PER_PAGE,
-});
 export default function Flows() {
   const formatMessage = useFormatMessage();
   const [searchParams, setSearchParams] = useSearchParams();
   const page = parseInt(searchParams.get('page') || '', 10) || 1;
   const [flowName, setFlowName] = React.useState('');
-  const [loading, setLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
-  const [getFlows, { data }] = useLazyQuery(GET_FLOWS, {
+
-    onCompleted: () => {
+  const { data, mutate } = useLazyFlows(
-      setLoading(false);
+    { flowName, page },
+    {
+      onSuccess: () => {
+        setIsLoading(false);
+      },
     },
-  });
-  const fetchData = React.useMemo(
-    () =>
-      debounce(
-        (name) =>
-          getFlows({
-            variables: {
-              ...getLimitAndOffset(page),
-              name,
-            },
-          }),
-        300,
-      ),
-    [page, getFlows],
-  );
-  React.useEffect(
-    function fetchFlowsOnSearch() {
-      setLoading(true);
-      fetchData(flowName);
-    },
-    [fetchData, flowName],
   );
+
+  const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
+
+  React.useEffect(() => {
+    setIsLoading(true);
+
+    fetchData({ flowName, page });
+
+    return () => {
+      fetchData.cancel();
+    };
+  }, [fetchData, flowName, page]);
+
   React.useEffect(
     function resetPageOnSearch() {
       // reset search params which only consists of `page`
@@ -63,17 +55,15 @@ export default function Flows() {
     },
     [flowName],
   );
-  React.useEffect(function cancelDebounceOnUnmount() {
+
-    return () => {
+  const flows = data?.data || [];
-      fetchData.cancel();
+  const pageInfo = data?.meta;
-    };
-  }, []);
-  const { pageInfo, edges } = data?.getFlows || {};
-  const flows = edges?.map(({ node }) => node);
   const hasFlows = flows?.length;
+
   const onSearchChange = React.useCallback((event) => {
     setFlowName(event.target.value);
   }, []);
+
   return (
     <Box sx={{ py: 3 }}>
       <Container>
@@ -116,18 +106,18 @@ export default function Flows() {
         </Grid>
 
         <Divider sx={{ mt: [2, 0], mb: 2 }} />
-        {loading && (
+        {isLoading && (
           <CircularProgress sx={{ display: 'block', margin: '20px auto' }} />
         )}
-        {!loading &&
+        {!isLoading &&
           flows?.map((flow) => <FlowRow key={flow.id} flow={flow} />)}
-        {!loading && !hasFlows && (
+        {!isLoading && !hasFlows && (
           <NoResultFound
             text={formatMessage('flows.noFlows')}
             to={URLS.CREATE_FLOW}
           />
         )}
-        {!loading && pageInfo && pageInfo.totalPages > 1 && (
+        {!isLoading && pageInfo && pageInfo.totalPages > 1 && (
           <Pagination
             sx={{ display: 'flex', justifyContent: 'center', mt: 3 }}
             page={pageInfo?.currentPage}