refactor: rewrite parameters of RQ hooks

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

@@ -40,12 +40,14 @@ function AddNewAppConnection(props) {
   const [appName, setAppName] = React.useState('');
   const [isLoading, setIsLoading] = React.useState(false);
 
-  const { data: apps, mutate } = useLazyApps({
+  const { data: apps, mutate } = useLazyApps(
-    appName,
+    { appName },
-    onSuccess: () => {
+    {
-      setIsLoading(false);
+      onSuccess: () => {
+        setIsLoading(false);
+      },
     },
-  });
+  );
 
   const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
 

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

@@ -161,17 +161,17 @@ function FlowStep(props) {
     ({ key }) => key === step.key,
   );
 
-  const { data: triggerSubsteps } = useTriggerSubsteps(
+  const { data: triggerSubsteps } = useTriggerSubsteps({
-    app?.key,
+    appKey: app?.key,
-    actionOrTrigger?.key,
+    triggerKey: actionOrTrigger?.key,
-  );
+  });
 
   const triggerSubstepsData = triggerSubsteps?.data || [];
 
-  const { data: actionSubsteps } = useActionSubsteps(
+  const { data: actionSubsteps } = useActionSubsteps({
-    app?.key,
+    appKey: app?.key,
-    actionOrTrigger?.key,
+    actionKey: actionOrTrigger?.key,
-  );
+  });
 
   const actionSubstepsData = actionSubsteps?.data || [];
 

packages/web/src/hooks/useActionSubsteps.js

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useActionSubsteps(appKey, actionKey) {
+export default function useActionSubsteps({ appKey, actionKey }) {
   const query = useQuery({
     queryKey: ['actionSubsteps', appKey, actionKey],
     queryFn: async ({ signal }) => {

packages/web/src/hooks/useApps.js

@@ -3,11 +3,15 @@ import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
 export default function useApps(variables) {
+  const trueOnlyVariables = Object.fromEntries(
+    Object.entries(variables).filter(([_, value]) => value === true),
+  );
+
   const query = useQuery({
-    queryKey: ['apps', variables],
+    queryKey: ['apps', trueOnlyVariables],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/apps', {
-        params: variables,
+        params: trueOnlyVariables,
         signal,
       });
 

packages/web/src/hooks/useLazyApps.js

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

packages/web/src/hooks/useTriggerSubsteps.js

@@ -2,7 +2,7 @@ import { useQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useTriggerSubsteps(appKey, triggerKey) {
+export default function useTriggerSubsteps({ appKey, triggerKey }) {
   const query = useQuery({
     queryKey: ['triggerSubsteps', appKey, triggerKey],
     queryFn: async ({ signal }) => {