Files
supabase/apps/studio/data/replication/destination-by-id-query.ts
Joshen Lim 6ffc3fc94c chore(studio): Replication UI updates for new replica CTA + URL query state handling (#42378)
## Context

Related to unifying read replicas into database replication page which
is currently in internal testing

## Changes involved

- Updates the "New replica" CTA in `DatabaseSelector` (e.g within the
SQL Editor) to link to the replication page instead of settings
infrastructure
- Refactor replication UI to use URL query states for new destination +
edit destination

## To test

- [ ] Verify that the "New replica" CTA links correctly to replication
page if flag is on
- [ ] Verify that new + edit destination UI works as expected
- Note that there's some server side validation for ETL replication now
so might be tricky to test creating an actual ETL replication
- Minimally can test creating a read replica and ensure that the UI
behaviour is all as expected

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

* **New Features**
* Added unified replication experience with URL-based state management
for destination creation and editing

* **Refactor**
* Simplified replication panel component interfaces and consolidated
destination data fetching logic
* Enhanced edit flows to leverage URL parameters for seamless navigation

* **Chores**
  * Marked legacy read replica creation panel as deprecated
<!-- end of auto-generated comment: release notes by coderabbit.ai -->
2026-02-03 15:54:21 +08:00

46 lines
1.6 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import type { components } from 'api-types'
import { get, handleError } from 'data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { replicationKeys } from './keys'
type ReplicationDestinationByIdParams = { projectRef?: string; destinationId?: number | null }
async function fetchReplicationDestinationById(
{ projectRef, destinationId }: ReplicationDestinationByIdParams,
signal?: AbortSignal
) {
if (!projectRef) throw new Error('projectRef is required')
if (!destinationId) throw new Error('destinationId is required')
const { data, error } = await get('/platform/replication/{ref}/destinations/{destination_id}', {
params: { path: { ref: projectRef, destination_id: destinationId } },
signal,
})
if (error) {
handleError(error)
}
return data
}
export type ReplicationDestinationByIdData = components['schemas']['ReplicationDestinationResponse']
export const useReplicationDestinationByIdQuery = <TData = ReplicationDestinationByIdData>(
{ projectRef, destinationId }: ReplicationDestinationByIdParams,
{
enabled = true,
...options
}: UseCustomQueryOptions<ReplicationDestinationByIdData, ResponseError, TData> = {}
) =>
useQuery<ReplicationDestinationByIdData, ResponseError, TData>({
queryKey: replicationKeys.destinationById(projectRef, destinationId),
queryFn: ({ signal }) => fetchReplicationDestinationById({ projectRef, destinationId }, signal),
enabled:
enabled &&
typeof projectRef !== 'undefined' &&
typeof destinationId !== 'undefined' &&
destinationId !== null,
...options,
})