refactor(web): rewrite mutation with POST /v1/admin/apps/:appKey/config

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

@@ -1,4 +1,3 @@
-import createAppConfig from './mutations/create-app-config.ee.js';
 import createConnection from './mutations/create-connection.js';
 import createFlow from './mutations/create-flow.js';
 import createRole from './mutations/create-role.ee.js';
@@ -31,7 +30,6 @@ import deleteStep from './mutations/delete-step.js';
 import verifyConnection from './mutations/verify-connection.js';
 
 const mutationResolvers = {
-  createAppConfig,
   createConnection,
   createFlow,
   createRole,

packages/backend/src/graphql/mutations/create-app-config.ee.js

@@ -1,18 +0,0 @@
-import App from '../../models/app.js';
-import AppConfig from '../../models/app-config.js';
-
-const createAppConfig = async (_parent, params, context) => {
-  context.currentUser.can('update', 'App');
-
-  const key = params.input.key;
-
-  const app = await App.findOneByKey(key);
-
-  if (!app) throw new Error('The app cannot be found!');
-
-  const appConfig = await AppConfig.query().insert(params.input);
-
-  return appConfig;
-};
-
-export default createAppConfig;

packages/backend/src/graphql/schema.graphql

@@ -2,7 +2,6 @@ type Query {
   placeholderQuery(name: String): Boolean
 }
 type Mutation {
-  createAppConfig(input: CreateAppConfigInput): AppConfig
   createConnection(input: CreateConnectionInput): Connection
   createFlow(input: CreateFlowInput): Flow
   createRole(input: CreateRoleInput): Role
@@ -549,13 +548,6 @@ type Subject {
   key: String
 }
 
-input CreateAppConfigInput {
-  key: String
-  allowCustomConnection: Boolean
-  shared: Boolean
-  disabled: Boolean
-}
-
 input UpdateAppConfigInput {
   id: String
   allowCustomConnection: Boolean

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

@@ -1,9 +1,8 @@
 import PropTypes from 'prop-types';
 import React, { useCallback, useMemo } from 'react';
-import { useMutation } from '@apollo/client';
 
 import { AppPropType } from 'propTypes/propTypes';
-import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
+import useAdminCreateAppConfig from 'hooks/useAdminCreateAppConfig';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAdminCreateAppAuthClient from 'hooks/useAdminCreateAppAuthClient.ee';
@@ -18,13 +17,11 @@ function AdminApplicationCreateAuthClient(props) {
   const { data: appConfig, isLoading: isAppConfigLoading } =
     useAppConfig(appKey);
 
-  const [
+  const {
-    createAppConfig,
+    mutateAsync: createAppConfig,
-    { loading: loadingCreateAppConfig, error: createAppConfigError },
+    isPending: isCreateAppConfigPending,
-  ] = useMutation(CREATE_APP_CONFIG, {
+    error: createAppConfigError
-    refetchQueries: ['GetAppConfig'],
+  } = useAdminCreateAppConfig(props.appKey);
-    context: { autoSnackbar: false },
-  });
 
   const {
     mutateAsync: createAppAuthClient,
@@ -37,17 +34,12 @@ function AdminApplicationCreateAuthClient(props) {
 
     if (!appConfigId) {
       const { data: appConfigData } = await createAppConfig({
-        variables: {
+        allowCustomConnection: true,
-          input: {
-            key: appKey,
-            allowCustomConnection: false,
         shared: false,
         disabled: false,
-          },
-        },
       });
 
-      appConfigId = appConfigData.createAppConfig.id;
+      appConfigId = appConfigData.id;
     }
 
     const { name, active, ...formattedAuthDefaults } = values;
@@ -97,7 +89,7 @@ function AdminApplicationCreateAuthClient(props) {
       loading={isAppConfigLoading}
       submitHandler={submitHandler}
       authFields={auth?.data?.fields}
-      submitting={loadingCreateAppConfig || isCreateAppAuthClientPending}
+      submitting={isCreateAppConfigPending || isCreateAppAuthClientPending}
       defaultValues={defaultValues}
     />
   );

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

@@ -8,11 +8,11 @@ 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';
 import { Switch } from './style';
 import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
+import useAdminCreateAppConfig from 'hooks/useAdminCreateAppConfig';
 
 function AdminApplicationSettings(props) {
   const formatMessage = useFormatMessage();
@@ -20,12 +20,10 @@ function AdminApplicationSettings(props) {
 
   const { data: appConfig, isLoading: loading } = useAppConfig(props.appKey);
 
-  const [createAppConfig, { loading: loadingCreateAppConfig }] = useMutation(
+  const {
-    CREATE_APP_CONFIG,
+    mutateAsync: createAppConfig,
-    {
+    isPending: isCreateAppConfigPending,
-      refetchQueries: ['GetAppConfig'],
+  } = useAdminCreateAppConfig(props.appKey);
-    },
-  );
 
   const [updateAppConfig, { loading: loadingUpdateAppConfig }] = useMutation(
     UPDATE_APP_CONFIG,
@@ -37,11 +35,7 @@ function AdminApplicationSettings(props) {
   const handleSubmit = async (values) => {
     try {
       if (!appConfig?.data) {
-        await createAppConfig({
+        await createAppConfig(values);
-          variables: {
-            input: { key: props.appKey, ...values },
-          },
-        });
       } else {
         await updateAppConfig({
           variables: {
@@ -108,7 +102,7 @@ function AdminApplicationSettings(props) {
               variant="contained"
               color="primary"
               sx={{ boxShadow: 2, mt: 5 }}
-              loading={loadingCreateAppConfig || loadingUpdateAppConfig}
+              loading={isCreateAppConfigPending || loadingUpdateAppConfig}
               disabled={!isDirty || loading}
             >
               {formatMessage('adminAppsSettings.save')}

packages/web/src/graphql/mutations/create-app-config.js

@@ -1,12 +0,0 @@
-import { gql } from '@apollo/client';
-export const CREATE_APP_CONFIG = gql`
-  mutation CreateAppConfig($input: CreateAppConfigInput) {
-    createAppConfig(input: $input) {
-      id
-      key
-      allowCustomConnection
-      shared
-      disabled
-    }
-  }
-`;

packages/web/src/hooks/useAdminCreateAppConfig.js

@@ -0,0 +1,21 @@
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAdminCreateAppConfig(appKey) {
+  const queryClient = useQueryClient();
+
+  const query = useMutation({
+    mutationFn: async (payload) => {
+      const { data } = await api.post(`/v1/admin/apps/${appKey}/config`, payload);
+
+      return data;
+    },
+    onSuccess: () => {
+      queryClient.invalidateQueries({
+        queryKey: ['apps', appKey, 'config'],
+      });
+    }
+  });
+
+  return query;
+}