Merge pull request #1791 from automatisch/AUT-905

refactor: rewrite get app connections with RQ

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

@@ -1,41 +0,0 @@
-import App from '../../models/app.js';
-import Connection from '../../models/connection.js';
-
-const getApp = async (_parent, params, context) => {
-  const conditions = context.currentUser.can('read', 'Connection');
-
-  const userConnections = context.currentUser.$relatedQuery('connections');
-  const allConnections = Connection.query();
-  const connectionBaseQuery = conditions.isCreator
-    ? userConnections
-    : allConnections;
-
-  const app = await App.findOneByKey(params.key);
-
-  if (context.currentUser) {
-    const connections = await connectionBaseQuery
-      .clone()
-      .select('connections.*')
-      .withGraphFetched({
-        appConfig: true,
-        appAuthClient: true,
-      })
-      .fullOuterJoinRelated('steps')
-      .where({
-        'connections.key': params.key,
-        'connections.draft': false,
-      })
-      .countDistinct('steps.flow_id as flowCount')
-      .groupBy('connections.id')
-      .orderBy('created_at', 'desc');
-
-    return {
-      ...app,
-      connections,
-    };
-  }
-
-  return app;
-};
-
-export default getApp;

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

@@ -1,4 +1,3 @@
-import getApp from './queries/get-app.js';
 import getAppAuthClient from './queries/get-app-auth-client.ee.js';
 import getBillingAndUsage from './queries/get-billing-and-usage.ee.js';
 import getConnectedApps from './queries/get-connected-apps.js';
@@ -7,7 +6,6 @@ import getStepWithTestExecutions from './queries/get-step-with-test-executions.j
 import testConnection from './queries/test-connection.js';
 
 const queryResolvers = {
-  getApp,
   getAppAuthClient,
   getBillingAndUsage,
   getConnectedApps,

packages/backend/src/graphql/schema.graphql

@@ -1,5 +1,4 @@
 type Query {
-  getApp(key: String!): App
   getAppAuthClient(id: String!): AppAuthClient
   getConnectedApps(name: String): [App]
   testConnection(id: String!): Connection

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/client';
+
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
+import useAppConnections from 'hooks/useAppConnections';
 
 function AppConnections(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { data } = useQuery(GET_APP_CONNECTIONS, {
+  const { data } = useAppConnections(appKey);
-    variables: { key: appKey },
+  const appConnections = data?.data || [];
-  });
-  const appConnections = data?.getApp?.connections || [];
   const hasConnections = appConnections?.length;
+
   if (!hasConnections) {
     return (
       <NoResultFound

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/client';
 import Autocomplete from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
@@ -12,7 +12,6 @@ import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import { EditorContext } from 'contexts/Editor';
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -23,6 +22,7 @@ import {
 } from 'propTypes/propTypes';
 import useStepConnection from 'hooks/useStepConnection';
 import { useQueryClient } from '@tanstack/react-query';
+import useAppConnections from 'hooks/useAppConnections';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -60,9 +60,11 @@ function ChooseConnectionSubstep(props) {
     useShared: true,
   });
 
-  const { data, loading, refetch } = useQuery(GET_APP_CONNECTIONS, {
+  const {
-    variables: { key: appKey },
+    data,
-  });
+    isLoading: isAppConnectionsLoading,
+    refetch,
+  } = useAppConnections(appKey);
 
   const { data: appConfig } = useAppConfig(application.key);
 
@@ -91,11 +93,10 @@ function ChooseConnectionSubstep(props) {
   }, []);
 
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.getApp;
+    const appWithConnections = data?.data;
     const options =
-      appWithConnections?.connections?.map((connection) =>
+      appWithConnections?.map((connection) => optionGenerator(connection)) ||
-        optionGenerator(connection),
+      [];
-      ) || [];
 
     if (!appConfig?.data || appConfig?.data?.canCustomConnect) {
       options.push({
@@ -242,7 +243,7 @@ function ChooseConnectionSubstep(props) {
             )}
             value={getOption(connectionOptions, stepConnection?.id)}
             onChange={handleChange}
-            loading={loading}
+            loading={isAppConnectionsLoading}
             data-test="choose-connection-autocomplete"
           />
 

packages/web/src/graphql/queries/get-app-connections.js

@@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_CONNECTIONS = gql`
-  query GetAppConnections($key: String!) {
-    getApp(key: $key) {
-      key
-      connections {
-        id
-        key
-        reconnectable
-        appAuthClientId
-        verified
-        flowCount
-        formattedData {
-          screenName
-        }
-        createdAt
-      }
-    }
-  }
-`;

packages/web/src/hooks/useAppConnections.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAppConnections(appKey) {
+  const query = useQuery({
+    queryKey: ['appConnections', appKey],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/connections`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}

packages/web/src/propTypes/propTypes.js

@@ -210,7 +210,7 @@ export const ConnectionPropType = PropTypes.shape({
   count: PropTypes.number,
   flowCount: PropTypes.number,
   appData: AppPropType,
-  createdAt: PropTypes.string,
+  createdAt: PropTypes.number,
   reconnectable: PropTypes.bool,
   appAuthClientId: PropTypes.string,
 });
@@ -236,6 +236,7 @@ export const FlowPropType = PropTypes.shape({
   active: PropTypes.bool,
   status: PropTypes.oneOf(['paused', 'published', 'draft']),
   createdAt: PropTypes.oneOfType([
+    PropTypes.number,
     PropTypes.string,
     PropTypes.instanceOf(Date),
   ]),