Files
supabase/apps/studio/data/integrations/integrations-vercel-connections-create-mutation.ts
Danny White 9b3e0a9060 show Vercel connection errors inline (#48473)
## What kind of change does this PR introduce?

Bug fix.

## What is the current behavior?

Vercel install and project-link failures use transient toasts.

## What is the new behavior?

Failures remain visible below the relevant action and clear when the
user retries or changes a selection.

The Vercel mutation hooks expose errors without choosing their
presentation. Interstitial callers render them inline, while existing
non-interstitial callers explicitly retain their toasts.

| Before | After |
| --- | --- |
| <img width="1024" height="759" alt="Install Vercel Integration
Supabase"
src="https://github.com/user-attachments/assets/6348cdd2-220a-4ad8-89f9-7fc51de36a3c"
/> | <img width="1024" height="759" alt="Install Vercel Integration
Supabase"
src="https://github.com/user-attachments/assets/ecc50c4e-daab-4f6d-bf86-7282e2aff92c"
/> |

## To test

1. Switch to `dnywh/inline-vercel-errors` (this branch).
2. Open `apps/studio/pages/integrations/vercel/install.tsx`.
3. Find the `actionError` assignment immediately below
`useVercelIntegrationCreateMutation` and replace the whole assignment
with:
   ```tsx
   const actionError = 'Creating Vercel integration failed: Test error'
   ```
4. With local Studio running and while signed in, open
`http://localhost:8082/integrations/vercel/install?code=test&configurationId=test&source=marketplace`
5. Confirm the error remains visible below **Install integration**. No
Vercel installation or real authorisation code is required.
6. Revert the temporary edit.

<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit

## Bug Fixes

* Improved error handling across Vercel project connection and
installation flows.
* Validation, duplicate-connection, and connection failures now appear
inline in the relevant setup steps.
* Errors clear automatically when the selected project or organization
changes.
* Notifications remain available in supported flows, including new
project creation and side-panel setup.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-08-05 16:06:58 +10:00

74 lines
2.4 KiB
TypeScript

import { useMutation, useQueryClient } from '@tanstack/react-query'
import type { IntegrationConnectionsCreateVariables } from './integrations.types'
import { integrationKeys } from './keys'
import { handleError, post } from '@/data/fetchers'
import { useIntegrationInstallationSnapshot } from '@/state/integration-installation'
import type { ResponseError, UseCustomMutationOptions } from '@/types'
export async function createIntegrationVercelConnections({
organizationIntegrationId,
connection,
}: IntegrationConnectionsCreateVariables) {
const { data, error } = await post('/platform/integrations/vercel/connections', {
body: {
organization_integration_id: organizationIntegrationId,
connection: {
foreign_project_id: connection.foreign_project_id,
supabase_project_ref: connection.supabase_project_ref,
metadata: connection.metadata,
},
},
})
if (error) handleError(error)
return data
}
export type IntegrationVercelConnectionsCreateData = Awaited<
ReturnType<typeof createIntegrationVercelConnections>
>
export const useIntegrationVercelConnectionsCreateMutation = ({
onSuccess,
onError,
...options
}: Omit<
UseCustomMutationOptions<
IntegrationVercelConnectionsCreateData,
ResponseError,
IntegrationConnectionsCreateVariables
>,
'mutationFn'
> = {}) => {
const queryClient = useQueryClient()
const snapshot = useIntegrationInstallationSnapshot()
return useMutation<
IntegrationVercelConnectionsCreateData,
ResponseError,
IntegrationConnectionsCreateVariables
>({
mutationFn: (vars) => createIntegrationVercelConnections(vars),
async onSuccess(data, variables, context) {
await Promise.all([
queryClient.invalidateQueries({ queryKey: integrationKeys.integrationsList() }),
queryClient.invalidateQueries({
queryKey: integrationKeys.integrationsListWithOrg(variables.orgSlug),
}),
queryClient.invalidateQueries({
queryKey: integrationKeys.vercelProjectList(variables.organizationIntegrationId),
}),
queryClient.invalidateQueries({
queryKey: integrationKeys.vercelConnectionsList(variables.organizationIntegrationId),
}),
])
await onSuccess?.(data, variables, context)
},
async onError(data, variables, context) {
snapshot.setLoading(false)
await onError?.(data, variables, context)
},
...options,
})
}