refactor: rewrite get-apps queries with RQ

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

@@ -1,17 +0,0 @@
-import App from '../../models/app.js';
-
-const getApps = async (_parent, params) => {
-  const apps = await App.findAll(params.name);
-
-  if (params.onlyWithTriggers) {
-    return apps.filter((app) => app.triggers?.length);
-  }
-
-  if (params.onlyWithActions) {
-    return apps.filter((app) => app.actions?.length);
-  }
-
-  return apps;
-};
-
-export default getApps;

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

@@ -2,7 +2,6 @@ import getApp from './queries/get-app.js';
 import getAppAuthClient from './queries/get-app-auth-client.ee.js';
 import getAppAuthClients from './queries/get-app-auth-clients.ee.js';
 import getAppConfig from './queries/get-app-config.ee.js';
-import getApps from './queries/get-apps.js';
 import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
 import getConfig from './queries/get-config.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
@@ -37,7 +36,6 @@ const queryResolvers = {
   getAppAuthClient,
   getAppAuthClients,
   getAppConfig,
-  getApps,
   getBillingAndUsage,
   getConfig,
   getConnectedApps,

packages/backend/src/graphql/schema.graphql

@@ -1,9 +1,4 @@
 type Query {
-  getApps(
-    name: String
-    onlyWithTriggers: Boolean
-    onlyWithActions: Boolean
-  ): [App]
   getApp(key: String!): App
   getAppConfig(key: String!): AppConfig
   getAppAuthClient(id: String!): AppAuthClient

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

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useLazyQuery } from '@apollo/client';
 import { Link } from 'react-router-dom';
 import debounce from 'lodash/debounce';
 import { useTheme } from '@mui/material/styles';
@@ -20,15 +19,18 @@ import InputLabel from '@mui/material/InputLabel';
 import OutlinedInput from '@mui/material/OutlinedInput';
 import FormControl from '@mui/material/FormControl';
 import Box from '@mui/material/Box';
+
+import api from 'helpers/api';
 import * as URLS from 'config/urls';
 import AppIcon from 'components/AppIcon';
-import { GET_APPS } from 'graphql/queries/get-apps';
 import useFormatMessage from 'hooks/useFormatMessage';
+import { useMutation } from '@tanstack/react-query';
 
 function createConnectionOrFlow(appKey, supportsConnections = false) {
   if (!supportsConnections) {
     return URLS.CREATE_FLOW_WITH_APP(appKey);
   }
+
   return URLS.APP_ADD_CONNECTION(appKey);
 }
 function AddNewAppConnection(props) {
@@ -36,29 +38,31 @@ function AddNewAppConnection(props) {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('sm'));
   const formatMessage = useFormatMessage();
-  const [appName, setAppName] = React.useState(null);
+  const [appName, setAppName] = React.useState('');
-  const [loading, setLoading] = React.useState(false);
+  const [isLoading, setIsLoading] = React.useState(false);
-  const [getApps, { data }] = useLazyQuery(GET_APPS, {
+
-    onCompleted: () => {
+  const { data: apps, mutate } = useMutation({
-      setLoading(false);
+    mutationFn: async ({ payload, signal }) => {
+      const { data } = await api.get('/v1/apps', {
+        params: { name: appName },
+      });
+
+      return data;
+    },
+    onSuccess: () => {
+      setIsLoading(false);
     },
   });
-  const fetchData = React.useMemo(
+
-    () => debounce((name) => getApps({ variables: { name } }), 300),
+  const fetchData = React.useMemo(() => debounce(mutate, 300), [mutate]);
-    [getApps],
+
-  );
+  React.useEffect(() => {
-  React.useEffect(
+    setIsLoading(true);
-    function fetchAppsOnAppNameChange() {
+    fetchData(appName);
-      setLoading(true);
+
-      fetchData(appName);
+    return () => fetchData.cancel();
-    },
+  }, [fetchData, appName]);
-    [fetchData, appName],
+
-  );
-  React.useEffect(function cancelDebounceOnUnmount() {
-    return () => {
-      fetchData.cancel();
-    };
-  }, []);
   return (
     <Dialog
       open={true}
@@ -102,15 +106,15 @@ function AddNewAppConnection(props) {
 
       <DialogContent>
         <List sx={{ pt: 2, width: '100%' }}>
-          {loading && (
+          {isLoading && (
             <CircularProgress
               data-test="search-for-app-loader"
               sx={{ display: 'block', margin: '20px auto' }}
             />
           )}
 
-          {!loading &&
+          {!isLoading &&
-            data?.getApps?.map((app) => (
+            apps?.data.map((app) => (
               <ListItem disablePadding key={app.name} data-test="app-list-item">
                 <ListItemButton
                   component={Link}

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

@@ -1,234 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APPS = gql`
-  query GetApps(
-    $name: String
-    $onlyWithTriggers: Boolean
-    $onlyWithActions: Boolean
-  ) {
-    getApps(
-      name: $name
-      onlyWithTriggers: $onlyWithTriggers
-      onlyWithActions: $onlyWithActions
-    ) {
-      name
-      key
-      iconUrl
-      docUrl
-      authDocUrl
-      primaryColor
-      connectionCount
-      flowCount
-      supportsConnections
-      auth {
-        fields {
-          key
-          label
-          type
-          required
-          readOnly
-          value
-          placeholder
-          description
-          docUrl
-          clickToCopy
-          options {
-            label
-            value
-          }
-        }
-        authenticationSteps {
-          type
-          name
-          arguments {
-            name
-            value
-            type
-            properties {
-              name
-              value
-            }
-          }
-        }
-        sharedAuthenticationSteps {
-          type
-          name
-          arguments {
-            name
-            value
-            type
-            properties {
-              name
-              value
-            }
-          }
-        }
-        reconnectionSteps {
-          type
-          name
-          arguments {
-            name
-            value
-            type
-            properties {
-              name
-              value
-            }
-          }
-        }
-        sharedReconnectionSteps {
-          type
-          name
-          arguments {
-            name
-            value
-            type
-            properties {
-              name
-              value
-            }
-          }
-        }
-      }
-      triggers {
-        name
-        key
-        type
-        showWebhookUrl
-        pollInterval
-        description
-        substeps {
-          key
-          name
-          arguments {
-            label
-            key
-            type
-            required
-            description
-            variables
-            dependsOn
-            options {
-              label
-              value
-            }
-            source {
-              type
-              name
-              arguments {
-                name
-                value
-              }
-            }
-            additionalFields {
-              type
-              name
-              arguments {
-                name
-                value
-              }
-            }
-            fields {
-              label
-              key
-              type
-              required
-              description
-              variables
-              value
-              dependsOn
-              options {
-                label
-                value
-              }
-              source {
-                type
-                name
-                arguments {
-                  name
-                  value
-                }
-              }
-              additionalFields {
-                type
-                name
-                arguments {
-                  name
-                  value
-                }
-              }
-            }
-          }
-        }
-      }
-      actions {
-        name
-        key
-        description
-        substeps {
-          key
-          name
-          arguments {
-            label
-            key
-            type
-            required
-            description
-            variables
-            dependsOn
-            value
-            options {
-              label
-              value
-            }
-            source {
-              type
-              name
-              arguments {
-                name
-                value
-              }
-            }
-            additionalFields {
-              type
-              name
-              arguments {
-                name
-                value
-              }
-            }
-            fields {
-              label
-              key
-              type
-              required
-              description
-              variables
-              value
-              dependsOn
-              options {
-                label
-                value
-              }
-              source {
-                type
-                name
-                arguments {
-                  name
-                  value
-                }
-              }
-              additionalFields {
-                type
-                name
-                arguments {
-                  name
-                  value
-                }
-              }
-            }
-          }
-        }
-      }
-    }
-  }
-`;

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

@@ -2,24 +2,36 @@ import * as React from 'react';
 import Grid from '@mui/material/Grid';
 import CircularProgress from '@mui/material/CircularProgress';
 import Divider from '@mui/material/Divider';
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@tanstack/react-query';
+
 import PageTitle from 'components/PageTitle';
 import Container from 'components/Container';
 import SearchInput from 'components/SearchInput';
 import AppRow from 'components/AppRow';
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
-import { GET_APPS } from 'graphql/queries/get-apps';
+import api from 'helpers/api';
+
 function AdminApplications() {
   const formatMessage = useFormatMessage();
   const [appName, setAppName] = React.useState(null);
-  const { data, loading: appsLoading } = useQuery(GET_APPS, {
+
-    variables: { name: appName },
+  const { data: apps, isLoading: appsLoading } = useQuery({
+    queryKey: ['apps', appName],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get('/v1/apps', {
+        params: { name: appName },
+        signal,
+      });
+
+      return data;
+    },
   });
-  const apps = data?.getApps;
+
   const onSearchChange = React.useCallback((event) => {
     setAppName(event.target.value);
   }, []);
+
   return (
     <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>
       <Grid container item xs={12} sm={10} md={9}>
@@ -44,7 +56,7 @@ function AdminApplications() {
         )}
 
         {!appsLoading &&
-          apps?.map((app) => (
+          apps?.data?.map((app) => (
             <Grid item xs={12} key={app.name}>
               <AppRow application={app} url={URLS.ADMIN_APP(app.key)} />
             </Grid>