refactor: rewrite useAppConfig with RQ

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,
-      shared: appConfig?.shared || false,
-      disabled: appConfig?.disabled || false,
+      allowCustomConnection: appConfig?.data?.allowCustomConnection || false,
+      shared: appConfig?.data?.shared || 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 (