refactor: rewrite create-app-auth-client mutation as REST endpoint

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

@@ -4,9 +4,9 @@ import { useMutation } from '@apollo/client';
 
 import { AppPropType } from 'propTypes/propTypes';
 import { CREATE_APP_CONFIG } from 'graphql/mutations/create-app-config';
-import { CREATE_APP_AUTH_CLIENT } from 'graphql/mutations/create-app-auth-client';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useAdminCreateAppAuthClient from 'hooks/useAdminCreateAppAuthClient.ee';
 import AdminApplicationAuthClientDialog from 'components/AdminApplicationAuthClientDialog';
 import useAppAuth from 'hooks/useAppAuth';
 
@@ -26,13 +26,11 @@ function AdminApplicationCreateAuthClient(props) {
     context: { autoSnackbar: false },
   });
 
-  const [
-    createAppAuthClient,
-    { loading: loadingCreateAppAuthClient, error: createAppAuthClientError },
-  ] = useMutation(CREATE_APP_AUTH_CLIENT, {
-    refetchQueries: ['GetAppAuthClients'],
-    context: { autoSnackbar: false },
-  });
+  const {
+    mutateAsync: createAppAuthClient,
+    isPending: isCreateAppAuithClientPending,
+    error: createAppAuthClientError,
+  } = useAdminCreateAppAuthClient(appKey);
 
   const submitHandler = async (values) => {
     let appConfigId = appConfig?.data?.id;
@@ -55,14 +53,10 @@ function AdminApplicationCreateAuthClient(props) {
     const { name, active, ...formattedAuthDefaults } = values;
 
     await createAppAuthClient({
-      variables: {
-        input: {
-          appConfigId,
-          name,
-          active,
-          formattedAuthDefaults,
-        },
-      },
+      appKey,
+      name,
+      active,
+      formattedAuthDefaults,
     });
 
     onClose();
@@ -103,7 +97,7 @@ function AdminApplicationCreateAuthClient(props) {
       loading={isAppConfigLoading}
       submitHandler={submitHandler}
       authFields={auth?.data?.fields}
-      submitting={loadingCreateAppConfig || loadingCreateAppAuthClient}
+      submitting={loadingCreateAppConfig || isCreateAppAuithClientPending}
       defaultValues={defaultValues}
     />
   );

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

@@ -16,7 +16,7 @@ function AdminApplicationUpdateAuthClient(props) {
   const { clientId } = useParams();
 
   const { data: adminAppAuthClient, isLoading: isAdminAuthClientLoading } =
-    useAdminAppAuthClient(clientId);
+    useAdminAppAuthClient(application.key, clientId);
 
   const { data: auth } = useAppAuth(application.key);
 

packages/web/src/graphql/mutations/create-app-auth-client.js

@@ -1,11 +0,0 @@
-import { gql } from '@apollo/client';
-export const CREATE_APP_AUTH_CLIENT = gql`
-  mutation CreateAppAuthClient($input: CreateAppAuthClientInput) {
-    createAppAuthClient(input: $input) {
-      id
-      appConfigId
-      name
-      active
-    }
-  }
-`;

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

@@ -2,17 +2,17 @@ import { useQuery } from '@tanstack/react-query';
 
 import api from 'helpers/api';
 
-export default function useAdminAppAuthClient(id) {
+export default function useAdminAppAuthClient(appKey, id) {
   const query = useQuery({
-    queryKey: ['admin', 'appAuthClients', id],
+    queryKey: ['admin', 'apps', appKey, 'authClients', id],
     queryFn: async ({ signal }) => {
-      const { data } = await api.get(`/v1/admin/app-auth-clients/${id}`, {
+      const { data } = await api.get(`/v1/admin/apps/${appKey}/auth-clients/${id}`, {
         signal,
       });
 
       return data;
     },
-    enabled: !!id,
+    enabled: !!appKey && !!id,
   });
 
   return query;

packages/web/src/hooks/useAdminAppAuthClients.js

@@ -1,9 +1,9 @@
 import { useQuery } from '@tanstack/react-query';
 import api from 'helpers/api';
 
-export default function useAdminAppAuthClient(appKey) {
+export default function useAdminAppAuthClients(appKey) {
   const query = useQuery({
-    queryKey: ['admin', 'apps', appKey, 'auth-clients'],
+    queryKey: ['admin', 'apps', appKey, 'authClients'],
     queryFn: async ({ signal }) => {
       const { data } = await api.get(`/v1/admin/apps/${appKey}/auth-clients`, {
         signal,

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

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