refactor: move abort controller into useLazyApps hook

packages/backend/src/controllers/api/v1/apps/get-apps.js

@@ -4,11 +4,11 @@ import { renderObject } from '../../../../helpers/renderer.js';
 export default async (request, response) => {
   let apps = await App.findAll(request.query.name);
 
-  if (request.query.onlyWithTriggers === 'true') {
+  if (request.query.onlyWithTriggers) {
     apps = apps.filter((app) => app.triggers?.length);
   }
 
-  if (request.query.onlyWithActions === 'true') {
+  if (request.query.onlyWithActions) {
     apps = apps.filter((app) => app.actions?.length);
   }
 

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

@@ -39,14 +39,12 @@ function AddNewAppConnection(props) {
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
-  const abortControllerRef = React.useRef(null);
 
   const { data: apps, mutate } = useLazyApps({
     appName,
     onSuccess: () => {
       setIsLoading(false);
     },
-    abortControllerRef,
   });
 
   const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
@@ -54,18 +52,10 @@ function AddNewAppConnection(props) {
   React.useEffect(() => {
     setIsLoading(true);
 
-    if (abortControllerRef.current) {
-      abortControllerRef.current.abort();
-    }
-    abortControllerRef.current = new AbortController();
-
     fetchData(appName);
 
     return () => {
       fetchData.cancel();
-      if (abortControllerRef.current) {
-        abortControllerRef.current.abort();
-      }
     };
   }, [fetchData, appName]);
 

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

@@ -45,11 +45,17 @@ function ChooseAppAndEventSubstep(props) {
   const editorContext = React.useContext(EditorContext);
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
+  const useAppsOptions = {};
 
-  const { data: apps } = useApps({
-    onlyWithTriggers: isTrigger,
-    onlyWithActions: isAction,
-  });
+  if (isTrigger) {
+    useAppsOptions.onlyWithTriggers = true;
+  }
+
+  if (isAction) {
+    useAppsOptions.onlyWithActions = true;
+  }
+
+  const { data: apps } = useApps(useAppsOptions);
 
   const app = apps?.data?.find(
     (currentApp) => currentApp?.key === step?.appKey,
@@ -68,7 +74,7 @@ function ChooseAppAndEventSubstep(props) {
 
   const actionOrTriggerOptions = React.useMemo(
     () => actionsOrTriggers.map((trigger) => eventOptionGenerator(trigger)),
-    [app?.key, actionsOrTriggers],
+    [actionsOrTriggers],
   );
 
   const selectedActionOrTrigger = actionsOrTriggers.find(

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

@@ -79,11 +79,17 @@ function ExecutionStep(props) {
   const isTrigger = step.type === 'trigger';
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
+  const useAppsOptions = {};
 
-  const { data: apps } = useApps({
-    onlyWithTriggers: isTrigger,
-    onlyWithActions: isAction,
-  });
+  if (isTrigger) {
+    useAppsOptions.onlyWithTriggers = true;
+  }
+
+  if (isAction) {
+    useAppsOptions.onlyWithActions = true;
+  }
+
+  const { data: apps } = useApps(useAppsOptions);
 
   const app = apps?.data?.find((currentApp) => currentApp.key === step.appKey);
 

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

@@ -39,7 +39,7 @@ import { StepPropType } from 'propTypes/propTypes';
 import useTriggers from 'hooks/useTriggers';
 import useActions from 'hooks/useActions';
 import useTriggerSubsteps from 'hooks/useTriggerSubsteps';
-import useActionSubsteps from 'hooks/useActionsSubsteps';
+import useActionSubsteps from 'hooks/useActionSubsteps';
 
 const validIcon = <CheckCircleIcon color="success" />;
 const errorIcon = <ErrorIcon color="error" />;
@@ -114,11 +114,17 @@ function FlowStep(props) {
   const isAction = step.type === 'action';
   const formatMessage = useFormatMessage();
   const [currentSubstep, setCurrentSubstep] = React.useState(0);
+  const useAppsOptions = {};
 
-  const { data: apps } = useApps({
-    onlyWithTriggers: isTrigger,
-    onlyWithActions: isAction,
-  });
+  if (isTrigger) {
+    useAppsOptions.onlyWithTriggers = true;
+  }
+
+  if (isAction) {
+    useAppsOptions.onlyWithActions = true;
+  }
+
+  const { data: apps } = useApps(useAppsOptions);
 
   const [
     getStepWithTestExecutions,

packages/web/src/hooks/useLazyApps.js

@@ -1,25 +1,26 @@
 import { useMutation } from '@tanstack/react-query';
 
 import api from 'helpers/api';
+import React from 'react';
+
+export default function useLazyApps({ appName, onSuccess }) {
+  const abortControllerRef = React.useRef(new AbortController());
+
+  React.useEffect(() => {
+    abortControllerRef.current = new AbortController();
+
+    return () => {
+      abortControllerRef.current?.abort();
+    };
+  }, [appName]);
 
-export default function useLazyApps({
-  appName,
-  onSuccess,
-  abortControllerRef,
-}) {
   const query = useMutation({
-    mutationFn: async ({ payload, signal }) => {
-      abortControllerRef.current = new AbortController();
-
+    mutationFn: async ({ payload }) => {
       const { data } = await api.get('/v1/apps', {
         params: { name: appName },
         signal: abortControllerRef.current.signal,
       });
 
-      if (abortControllerRef.current.signal.aborted) {
-        return;
-      }
-
       return data;
     },
     onSuccess,