Files
supabase/apps/studio/data/branches/branch-diff-query.ts
Andrew Valleteau dcc5703674 feat(branching): add-pg-delta-diff-for-branching (#42952)
Allow to use the `pg-delta` capability for merge requests diffing.
Feature flag it behind an auto opt-in flag.

Must be merged after: https://github.com/supabase/platform/pull/29776
<img width="921" height="623" alt="Screenshot 2026-02-17 at 16 50 38"
src="https://github.com/user-attachments/assets/bfe704e9-4137-45e1-b0b5-1cecce284d6e"
/>


Also updated the loading + final state of the diff view to:

1. Take all the height available

- From: <img width="1894" height="893" alt="Screenshot 2026-02-16 at 20
46 15"
src="https://github.com/user-attachments/assets/22ed8c72-2d9d-4b68-b315-6d40aefc0b3c"
/>


- To: <img width="1629" height="1396" alt="Screenshot 2026-02-16 at 20
57 26"
src="https://github.com/user-attachments/assets/6e83c8e9-607d-4077-977e-046058ce3e44"
/>

2. Show a proper loading state rather than just a plain grey skeleton

- From: <img width="2232" height="1137" alt="Screenshot 2026-02-20 at 15
02 51"
src="https://github.com/user-attachments/assets/0c924b04-d60f-49b5-a5a0-3bf1942bfdef"
/>
- To:
<img width="2231" height="1129" alt="Screenshot 2026-02-20 at 15 05 46"
src="https://github.com/user-attachments/assets/49751001-1818-4842-a0c8-b74683c2e9bc"
/>
2026-02-26 15:28:13 +01:00

62 lines
1.8 KiB
TypeScript

import { useQuery } from '@tanstack/react-query'
import { get, handleError } from 'data/fetchers'
import { IS_PLATFORM } from 'lib/constants'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { branchKeys } from './keys'
export type BranchDiffVariables = {
branchRef: string
projectRef: string
includedSchemas?: string
pgdelta?: boolean
}
export async function getBranchDiff({
branchRef,
includedSchemas,
pgdelta,
}: Pick<BranchDiffVariables, 'branchRef' | 'includedSchemas' | 'pgdelta'>) {
const query: { included_schemas?: string; pgdelta?: string } = {}
if (includedSchemas) query.included_schemas = includedSchemas
if (pgdelta === true) query.pgdelta = 'true'
const { data: diffData, error } = await get('/v1/branches/{branch_id_or_ref}/diff', {
params: {
path: { branch_id_or_ref: branchRef },
query: Object.keys(query).length > 0 ? query : undefined,
},
headers: {
Accept: 'text/plain',
},
parseAs: 'text',
})
if (error) {
handleError(error)
}
// Handle empty object responses (when no diff exists)
if (typeof diffData === 'object' && Object.keys(diffData).length === 0) {
return ''
}
return diffData || ''
}
type BranchDiffData = Awaited<ReturnType<typeof getBranchDiff>>
export const useBranchDiffQuery = (
{ branchRef, projectRef, includedSchemas, pgdelta }: BranchDiffVariables,
{
enabled = true,
...options
}: Omit<UseCustomQueryOptions<BranchDiffData, ResponseError>, 'queryKey' | 'queryFn'> = {}
) =>
useQuery<BranchDiffData, ResponseError>({
queryKey: branchKeys.diff(projectRef, branchRef, pgdelta),
queryFn: () => getBranchDiff({ branchRef, includedSchemas, pgdelta }),
enabled: IS_PLATFORM && enabled && Boolean(branchRef),
...options,
})