refactor: rewrite useAppConfig with RQ

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

@@ -1,17 +0,0 @@
-import AppConfig from '../../models/app-config.js';
-
-const getAppConfig = async (_parent, params, context) => {
-  context.currentUser.can('create', 'Connection');
-
-  const appConfig = await AppConfig.query()
-    .withGraphFetched({
-      appAuthClients: true,
-    })
-    .findOne({
-      key: params.key,
-    });
-
-  return appConfig;
-};
-
-export default getAppConfig;

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

@@ -1,7 +1,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 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';
@@ -35,7 +34,6 @@ const queryResolvers = {
   getApp,
   getAppAuthClient,
   getAppAuthClients,
-  getAppConfig,
   getBillingAndUsage,
   getConfig,
   getConnectedApps,

packages/backend/src/graphql/schema.graphql

@@ -1,6 +1,5 @@
 type Query {
   getApp(key: String!): App
-  getAppConfig(key: String!): AppConfig
   getAppAuthClient(id: String!): AppAuthClient
   getAppAuthClients(appKey: String!, active: Boolean): [AppAuthClient]
   getConnectedApps(name: String): [App]

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

@@ -14,7 +14,9 @@ function AdminApplicationCreateAuthClient(props) {
   const { appKey, onClose } = props;
   const { data: auth } = useAppAuth(appKey);
   const formatMessage = useFormatMessage();
-  const { appConfig, loading: loadingAppConfig } = useAppConfig(appKey);
+
+  const { data: appConfig, isLoading: isAppConfigLoading } =
+    useAppConfig(appKey);
 
   const [
     createAppConfig,
@@ -33,7 +35,7 @@ function AdminApplicationCreateAuthClient(props) {
   });
 
   const submitHandler = async (values) => {
-    let appConfigId = appConfig?.id;
+    let appConfigId = appConfig?.data?.id;
 
     if (!appConfigId) {
       const { data: appConfigData } = await createAppConfig({
@@ -51,6 +53,7 @@ function AdminApplicationCreateAuthClient(props) {
     }
 
     const { name, active, ...formattedAuthDefaults } = values;
+
     await createAppAuthClient({
       variables: {
         input: {
@@ -97,7 +100,7 @@ function AdminApplicationCreateAuthClient(props) {
       onClose={onClose}
       error={createAppConfigError || createAppAuthClientError}
       title={formatMessage('createAuthClient.title')}
-      loading={loadingAppConfig}
+      loading={isAppConfigLoading}
       submitHandler={submitHandler}
       authFields={auth?.data?.fields}
       submitting={loadingCreateAppConfig || loadingCreateAppAuthClient}

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

@@ -7,6 +7,7 @@ import Paper from '@mui/material/Paper';
 import Stack from '@mui/material/Stack';
 import LoadingButton from '@mui/lab/LoadingButton';
 import { useMutation } from '@apollo/client';
+
 import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
 import { UPDATE_APP_CONFIG } from 'graphql/mutations/update-app-config';
 import Form from 'components/Form';
@@ -14,24 +15,28 @@ import { Switch } from './style';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 
 function AdminApplicationSettings(props) {
-  const { appConfig, loading } = useAppConfig(props.appKey);
+  const formatMessage = useFormatMessage();
+  const enqueueSnackbar = useEnqueueSnackbar();
+
+  const { data: appConfig, isLoading: loading } = useAppConfig(props.appKey);
+
   const [createAppConfig, { loading: loadingCreateAppConfig }] = useMutation(
     CREATE_APP_CONFIG,
     {
       refetchQueries: ['GetAppConfig'],
     },
   );
+
   const [updateAppConfig, { loading: loadingUpdateAppConfig }] = useMutation(
     UPDATE_APP_CONFIG,
     {
       refetchQueries: ['GetAppConfig'],
     },
   );
-  const formatMessage = useFormatMessage();
+
-  const enqueueSnackbar = useEnqueueSnackbar();
   const handleSubmit = async (values) => {
     try {
-      if (!appConfig) {
+      if (!appConfig.data) {
         await createAppConfig({
           variables: {
             input: { key: props.appKey, ...values },
@@ -40,10 +45,11 @@ function AdminApplicationSettings(props) {
       } else {
         await updateAppConfig({
           variables: {
-            input: { id: appConfig.id, ...values },
+            input: { id: appConfig.data.id, ...values },
           },
         });
       }
+
       enqueueSnackbar(formatMessage('adminAppsSettings.successfullySaved'), {
         variant: 'success',
         SnackbarProps: {
@@ -54,13 +60,14 @@ function AdminApplicationSettings(props) {
       throw new Error('Failed while saving!');
     }
   };
+
   const defaultValues = useMemo(
     () => ({
-      allowCustomConnection: appConfig?.allowCustomConnection || false,
+      allowCustomConnection: appConfig?.data?.allowCustomConnection || false,
-      shared: appConfig?.shared || false,
+      shared: appConfig?.data?.shared || false,
-      disabled: appConfig?.disabled || false,
+      disabled: appConfig?.data?.disabled || false,
     }),
-    [appConfig],
+    [appConfig?.data],
   );
   return (
     <Form

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

@@ -6,6 +6,7 @@ import Collapse from '@mui/material/Collapse';
 import ListItem from '@mui/material/ListItem';
 import TextField from '@mui/material/TextField';
 import * as React from 'react';
+
 import AddAppConnection from 'components/AddAppConnection';
 import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
@@ -46,18 +47,22 @@ function ChooseConnectionSubstep(props) {
   const { connection, appKey } = step;
   const formatMessage = useFormatMessage();
   const editorContext = React.useContext(EditorContext);
-  const { authenticate } = useAuthenticateApp({
-    appKey: application.key,
-    useShared: true,
-  });
   const [showAddConnectionDialog, setShowAddConnectionDialog] =
     React.useState(false);
   const [showAddSharedConnectionDialog, setShowAddSharedConnectionDialog] =
     React.useState(false);
+
+  const { authenticate } = useAuthenticateApp({
+    appKey: application.key,
+    useShared: true,
+  });
+
   const { data, loading, refetch } = useQuery(GET_APP_CONNECTIONS, {
     variables: { key: appKey },
   });
-  const { appConfig } = useAppConfig(application.key);
+
+  const { data: appConfig } = useAppConfig(application.key);
+
   // TODO: show detailed error when connection test/verification fails
   const [
     testConnection,
@@ -67,6 +72,7 @@ function ChooseConnectionSubstep(props) {
       id: connection?.id,
     },
   });
+
   React.useEffect(() => {
     if (connection?.id) {
       testConnection({
@@ -77,32 +83,38 @@ function ChooseConnectionSubstep(props) {
     }
     // intentionally no dependencies for initial test
   }, []);
+
   const connectionOptions = React.useMemo(() => {
     const appWithConnections = data?.getApp;
     const options =
       appWithConnections?.connections?.map((connection) =>
         optionGenerator(connection),
       ) || [];
-    if (!appConfig || appConfig.canCustomConnect) {
+
+    if (!appConfig?.data || appConfig?.data?.canCustomConnect) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewConnection'),
         value: ADD_CONNECTION_VALUE,
       });
     }
-    if (appConfig?.canConnect) {
+
+    if (appConfig?.data?.canConnect) {
       options.push({
         label: formatMessage('chooseConnectionSubstep.addNewSharedConnection'),
         value: ADD_SHARED_CONNECTION_VALUE,
       });
     }
+
     return options;
-  }, [data, formatMessage, appConfig]);
+  }, [data, formatMessage, appConfig?.data]);
+
   const handleClientClick = async (appAuthClientId) => {
     try {
       const response = await authenticate?.({
         appAuthClientId,
       });
       const connectionId = response?.createConnection.id;
+
       if (connectionId) {
         await refetch();
         onChange({
@@ -120,11 +132,14 @@ function ChooseConnectionSubstep(props) {
       setShowAddSharedConnectionDialog(false);
     }
   };
+
   const { name } = substep;
+
   const handleAddConnectionClose = React.useCallback(
     async (response) => {
       setShowAddConnectionDialog(false);
       const connectionId = response?.createConnection.id;
+
       if (connectionId) {
         await refetch();
         onChange({
@@ -146,14 +161,17 @@ function ChooseConnectionSubstep(props) {
         const typedSelectedOption = selectedOption;
         const option = typedSelectedOption;
         const connectionId = option?.value;
+
         if (connectionId === ADD_CONNECTION_VALUE) {
           setShowAddConnectionDialog(true);
           return;
         }
+
         if (connectionId === ADD_SHARED_CONNECTION_VALUE) {
           setShowAddSharedConnectionDialog(true);
           return;
         }
+
         if (connectionId !== step.connection?.id) {
           onChange({
             step: {
@@ -168,6 +186,7 @@ function ChooseConnectionSubstep(props) {
     },
     [step, onChange],
   );
+
   React.useEffect(() => {
     if (step.connection?.id) {
       retestConnection({
@@ -175,6 +194,7 @@ function ChooseConnectionSubstep(props) {
       });
     }
   }, [step.connection?.id, retestConnection]);
+
   const onToggle = expanded ? onCollapse : onExpand;
 
   return (

packages/web/src/graphql/queries/get-app-config.ee.js

@@ -1,14 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_CONFIG = gql`
-  query GetAppConfig($key: String!) {
-    getAppConfig(key: $key) {
-      id
-      key
-      allowCustomConnection
-      canConnect
-      canCustomConnect
-      shared
-      disabled
-    }
-  }
-`;

packages/web/src/hooks/useAppConfig.ee.js

@@ -1,13 +1,17 @@
-import { useQuery } from '@apollo/client';
+import { useQuery } from '@tanstack/react-query';
-import { GET_APP_CONFIG } from 'graphql/queries/get-app-config.ee';
+import api from 'helpers/api';
-export default function useAppConfig(key) {
+
-  const { data, loading } = useQuery(GET_APP_CONFIG, {
+export default function useAppConfig(appKey) {
-    variables: { key },
+  const query = useQuery({
-    context: { autoSnackbar: false },
+    queryKey: ['appConfig', appKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/app-configs/${appKey}`, {
+        signal,
+      });
+
+      return data;
+    },
   });
-  const appConfig = data?.getAppConfig;
+
-  return {
+  return query;
-    appConfig,
-    loading,
-  };
 }

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

@@ -66,13 +66,14 @@ export default function Application() {
 
   const connectionOptions = React.useMemo(() => {
     const shouldHaveCustomConnection =
-      appConfig?.canConnect && appConfig?.canCustomConnect;
+      appConfig?.data?.canConnect && appConfig?.data?.canCustomConnect;
+
     const options = [
       {
         label: formatMessage('app.addConnection'),
         key: 'addConnection',
         'data-test': 'add-connection-button',
-        to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.canConnect),
+        to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.data?.canConnect),
       },
     ];
 
@@ -86,7 +87,7 @@ export default function Application() {
     }
 
     return options;
-  }, [appKey, appConfig]);
+  }, [appKey, appConfig?.data]);
 
   if (loading) return null;
 
@@ -135,9 +136,9 @@ export default function Application() {
                   element={
                     <SplitButton
                       disabled={
-                        appConfig &&
+                        appConfig?.data &&
-                        !appConfig?.canConnect &&
+                        !appConfig?.data?.canConnect &&
-                        !appConfig?.canCustomConnect
+                        !appConfig?.data?.canCustomConnect
                       }
                       options={connectionOptions}
                     />