Refactor error handling for oauth apps mutations

studio/data/oauth/authorized-app-revoke-mutation.ts

@@ -1,6 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { delete_ } from 'lib/common/fetch'
 import { API_ADMIN_URL } from 'lib/constants'
+import { ResponseError } from 'types'
 import { oauthAppKeys } from './keys'
 
 export type AuthorizedAppRevokeVariables = {
@@ -23,14 +26,15 @@ type AuthorizedAppRevokeData = Awaited<ReturnType<typeof revokeAuthorizedApp>>
 
 export const useAuthorizedAppRevokeMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
-  UseMutationOptions<AuthorizedAppRevokeData, unknown, AuthorizedAppRevokeVariables>,
+  UseMutationOptions<AuthorizedAppRevokeData, ResponseError, AuthorizedAppRevokeVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()
 
-  return useMutation<AuthorizedAppRevokeData, unknown, AuthorizedAppRevokeVariables>(
+  return useMutation<AuthorizedAppRevokeData, ResponseError, AuthorizedAppRevokeVariables>(
     (vars) => revokeAuthorizedApp(vars),
     {
       async onSuccess(data, variables, context) {
@@ -38,6 +42,13 @@ export const useAuthorizedAppRevokeMutation = ({
         await queryClient.invalidateQueries(oauthAppKeys.authorizedApps(slug))
         await onSuccess?.(data, variables, context)
       },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to revoke application: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
       ...options,
     }
   )

studio/data/oauth/oauth-app-create-mutation.ts

@@ -1,7 +1,10 @@
+import { toast } from 'react-hot-toast'
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+
 import { post } from 'lib/common/fetch'
 import { API_ADMIN_URL } from 'lib/constants'
 import { oauthAppKeys } from './keys'
+import { ResponseError } from 'types'
 
 export type OAuthAppCreateVariables = {
   slug: string
@@ -24,10 +27,6 @@ export async function createOAuthApp({
   icon,
   redirect_uris,
 }: OAuthAppCreateVariables) {
-  if (!slug) throw new Error('Organization slug is required')
-  if (!name) throw new Error('OAuth app name is required')
-  if (!website) throw new Error('OAuth app URL is required')
-
   const response = await post(`${API_ADMIN_URL}/organizations/${slug}/oauth/apps`, {
     name,
     website,
@@ -42,14 +41,15 @@ type OAuthAppCreateData = Awaited<ReturnType<typeof createOAuthApp>>
 
 export const useOAuthAppCreateMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
-  UseMutationOptions<OAuthAppCreateData, unknown, OAuthAppCreateVariables>,
+  UseMutationOptions<OAuthAppCreateData, ResponseError, OAuthAppCreateVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()
 
-  return useMutation<OAuthAppCreateData, unknown, OAuthAppCreateVariables>(
+  return useMutation<OAuthAppCreateData, ResponseError, OAuthAppCreateVariables>(
     (vars) => createOAuthApp(vars),
     {
       async onSuccess(data, variables, context) {
@@ -57,6 +57,13 @@ export const useOAuthAppCreateMutation = ({
         await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
         await onSuccess?.(data, variables, context)
       },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to create application: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
       ...options,
     }
   )

studio/data/oauth/oauth-app-delete-mutation.ts

@@ -1,6 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { delete_ } from 'lib/common/fetch'
 import { API_ADMIN_URL } from 'lib/constants'
+import { ResponseError } from 'types'
 import { oauthAppKeys } from './keys'
 
 export type OAuthAppDeleteVariables = {
@@ -23,14 +26,15 @@ type OAuthAppDeleteData = Awaited<ReturnType<typeof deleteOAuthApp>>
 
 export const useOAuthAppDeleteMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
-  UseMutationOptions<OAuthAppDeleteData, unknown, OAuthAppDeleteVariables>,
+  UseMutationOptions<OAuthAppDeleteData, ResponseError, OAuthAppDeleteVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()
 
-  return useMutation<OAuthAppDeleteData, unknown, OAuthAppDeleteVariables>(
+  return useMutation<OAuthAppDeleteData, ResponseError, OAuthAppDeleteVariables>(
     (vars) => deleteOAuthApp(vars),
     {
       async onSuccess(data, variables, context) {
@@ -38,6 +42,13 @@ export const useOAuthAppDeleteMutation = ({
         await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
         await onSuccess?.(data, variables, context)
       },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to delete application: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
       ...options,
     }
   )

studio/data/oauth/oauth-app-update-mutation.ts

@@ -1,6 +1,9 @@
 import { useMutation, UseMutationOptions, useQueryClient } from '@tanstack/react-query'
+import { toast } from 'react-hot-toast'
+
 import { put } from 'lib/common/fetch'
 import { API_ADMIN_URL } from 'lib/constants'
+import { ResponseError } from 'types'
 import { oauthAppKeys } from './keys'
 
 export type OAuthAppUpdateVariables = {
@@ -40,14 +43,15 @@ type OAuthAppUpdateData = Awaited<ReturnType<typeof updateOAuthApp>>
 
 export const useOAuthAppUpdateMutation = ({
   onSuccess,
+  onError,
   ...options
 }: Omit<
-  UseMutationOptions<OAuthAppUpdateData, unknown, OAuthAppUpdateVariables>,
+  UseMutationOptions<OAuthAppUpdateData, ResponseError, OAuthAppUpdateVariables>,
   'mutationFn'
 > = {}) => {
   const queryClient = useQueryClient()
 
-  return useMutation<OAuthAppUpdateData, unknown, OAuthAppUpdateVariables>(
+  return useMutation<OAuthAppUpdateData, ResponseError, OAuthAppUpdateVariables>(
     (vars) => updateOAuthApp(vars),
     {
       async onSuccess(data, variables, context) {
@@ -55,6 +59,13 @@ export const useOAuthAppUpdateMutation = ({
         await queryClient.invalidateQueries(oauthAppKeys.oauthApps(slug))
         await onSuccess?.(data, variables, context)
       },
+      async onError(data, variables, context) {
+        if (onError === undefined) {
+          toast.error(`Failed to update application: ${data.message}`)
+        } else {
+          onError(data, variables, context)
+        }
+      },
       ...options,
     }
   )