Files
supabase/apps/studio/data/tables/tables-query.ts
T
Gildas Garcia f66eb3f7bd feat: Allow to edit a column from the schema visualiser (#43592)
## Problem

Editing a column from the schema visualiser requires many clicks

## Solution

When hovering over a column in the schema visualiser, an edit button
should appear on the right side. Clicking this button should open the
column edit pane on the right side of the screen. This would reduce the
number of clicks required and allow users to make edits directly from
the visualiser instead of using it only as a visual aid.
2026-03-10 19:28:38 +01:00

125 lines
3.7 KiB
TypeScript

import type { PostgresTable } from '@supabase/postgres-meta'
import { useQuery, useQueryClient } from '@tanstack/react-query'
import { sortBy } from 'lodash'
import { useCallback } from 'react'
import { DEFAULT_PLATFORM_APPLICATION_NAME } from '@supabase/pg-meta/src/constants'
import { get, handleError } from 'data/fetchers'
import type { ResponseError, UseCustomQueryOptions } from 'types'
import { tableKeys } from './keys'
export type TablesVariables = {
projectRef?: string
connectionString?: string | null
schema?: string
/**
* Defaults to false
*/
includeColumns?: boolean
sortByProperty?: keyof PostgresTable
}
export async function getTables(
{
projectRef,
connectionString,
schema,
includeColumns = false,
sortByProperty = 'name',
}: TablesVariables,
signal?: AbortSignal
) {
if (!projectRef) {
throw new Error('projectRef is required')
}
let headers = new Headers()
if (connectionString) headers.set('x-connection-encrypted', connectionString)
let queryParams: Record<string, string> = {
//include_columns is a string, even though it's true or false
include_columns: `${includeColumns}`,
}
if (schema) {
queryParams.included_schemas = schema
}
const { data, error } = await get('/platform/pg-meta/{ref}/tables', {
params: {
header: {
'x-connection-encrypted': connectionString!,
'x-pg-application-name': DEFAULT_PLATFORM_APPLICATION_NAME,
},
path: { ref: projectRef },
query: queryParams as any,
},
headers,
signal,
})
if (!Array.isArray(data) && error) handleError(error)
// Sort the data if the sortByName option is true
if (Array.isArray(data) && sortByProperty) {
return sortBy(data, (t) => t[sortByProperty]) as PostgresTable[]
}
return data as PostgresTable[]
}
export type TablesData = Awaited<ReturnType<typeof getTables>>
export type TablesError = ResponseError
export const useTablesQuery = <TData = TablesData>(
{ projectRef, connectionString, schema, includeColumns }: TablesVariables,
{ enabled = true, ...options }: UseCustomQueryOptions<TablesData, TablesError, TData> = {}
) => {
return useQuery<TablesData, TablesError, TData>({
queryKey: tableKeys.list(projectRef, schema, includeColumns),
queryFn: ({ signal }) =>
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
enabled: enabled && typeof projectRef !== 'undefined',
...options,
})
}
/**
* useGetTables
* Tries to get tables from the react-query cache, or loads it from the server if it's not cached.
*/
export function useGetTables({
projectRef,
connectionString,
}: Pick<TablesVariables, 'projectRef' | 'connectionString'>) {
const queryClient = useQueryClient()
return useCallback(
(schema?: TablesVariables['schema'], includeColumns?: TablesVariables['includeColumns']) => {
return queryClient.fetchQuery({
queryKey: tableKeys.list(projectRef, schema, includeColumns),
queryFn: ({ signal }) =>
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
})
},
[connectionString, projectRef, queryClient]
)
}
export function usePrefetchTables({
projectRef,
connectionString,
}: Pick<TablesVariables, 'projectRef' | 'connectionString'>) {
const queryClient = useQueryClient()
return useCallback(
(schema?: TablesVariables['schema'], includeColumns?: TablesVariables['includeColumns']) => {
return queryClient.prefetchQuery({
queryKey: tableKeys.list(projectRef, schema, includeColumns),
queryFn: ({ signal }) =>
getTables({ projectRef, connectionString, schema, includeColumns }, signal),
})
},
[connectionString, projectRef, queryClient]
)
}