From b6d8e770fa753ca68650fedb2b7910db72a8ba37 Mon Sep 17 00:00:00 2001 From: Ivan Vasilov Date: Tue, 9 Jan 2024 17:39:40 +0100 Subject: [PATCH] fix: Don't fetch columns when fetching tables by default (#20157) * Only fetch the tables from the required schema in the MetaStore. * Don't include the columns in the getTables API call unless a flag is passed. * Use the new flag in the ForeignKeySelector. * Columns should be included for the schema visualizer. * Address comments. --- .../Database/Schemas/SchemaGraph.tsx | 1 + .../ForeignKeySelector/ForeignKeySelector.tsx | 10 +++--- apps/studio/data/tables/keys.ts | 7 +++-- apps/studio/data/tables/tables-query.ts | 31 +++++++++++++------ apps/studio/stores/pgmeta/MetaStore.ts | 5 +-- 5 files changed, 36 insertions(+), 18 deletions(-) diff --git a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx index d7afde35073..fd2d8fe5e1c 100644 --- a/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx +++ b/apps/studio/components/interfaces/Database/Schemas/SchemaGraph.tsx @@ -275,6 +275,7 @@ const SchemaGraph = ({ schema }: { schema: string }) => { projectRef: project?.ref, connectionString: project?.connectionString, schema, + includeColumns: true, }) if (isLoading) { diff --git a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx index fca2d9f0822..ea075246638 100644 --- a/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx +++ b/apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx @@ -2,12 +2,12 @@ import type { PostgresColumn, PostgresSchema, PostgresTable } from '@supabase/po import { find, get, isEmpty, sortBy } from 'lodash' import { useEffect, useState } from 'react' -import { Dictionary } from 'types' import { useProjectContext } from 'components/layouts/ProjectLayout/ProjectContext' import InformationBox from 'components/ui/InformationBox' import { FOREIGN_KEY_CASCADE_ACTION } from 'data/database/database-query-constants' import { useSchemasQuery } from 'data/database/schemas-query' import { useTablesQuery } from 'data/tables/tables-query' +import { Dictionary } from 'types' import { AlertDescription_Shadcn_, AlertTitle_Shadcn_, @@ -63,10 +63,12 @@ const ForeignKeySelector = ({ projectRef: project?.ref, connectionString: project?.connectionString, }) - const { data: tables } = useTablesQuery({ + // change the return type because of the includeColumns param + const { data: tables } = useTablesQuery({ projectRef: project?.ref, connectionString: project?.connectionString, schema: selectedForeignKey.schema, + includeColumns: true, }) const foreignKey = column?.foreignKey @@ -188,7 +190,6 @@ const ForeignKeySelector = ({ size="medium" visible={visible} onCancel={closePanel} - // @ts-ignore header={ Edit foreign key relation{' '} @@ -256,8 +257,7 @@ const ForeignKeySelector = ({ --- - {/* @ts-ignore */} - {sortBy(tables, ['schema']).map((table: PostgresTable) => { + {sortBy(tables, ['schema']).map((table) => { return (
diff --git a/apps/studio/data/tables/keys.ts b/apps/studio/data/tables/keys.ts index 2947ecc11f8..760be314924 100644 --- a/apps/studio/data/tables/keys.ts +++ b/apps/studio/data/tables/keys.ts @@ -1,6 +1,9 @@ export const tableKeys = { - list: (projectRef: string | undefined, schema: string | undefined) => - ['projects', projectRef, 'tables', { schema }] as const, + list: ( + projectRef: string | undefined, + schema: string | undefined, + includeColumns?: boolean | undefined + ) => ['projects', projectRef, 'tables', { schema, includeColumns: !!includeColumns }] as const, table: (projectRef: string | undefined, id: number | undefined) => ['projects', projectRef, 'tables', id] as const, } diff --git a/apps/studio/data/tables/tables-query.ts b/apps/studio/data/tables/tables-query.ts index eb4ad2846a3..3c123dbc732 100644 --- a/apps/studio/data/tables/tables-query.ts +++ b/apps/studio/data/tables/tables-query.ts @@ -10,11 +10,21 @@ export type TablesVariables = { projectRef?: string connectionString?: string schema?: string + /** + * Defaults to false + */ + includeColumns?: boolean sortByProperty?: keyof PostgresTable } export async function getTables( - { projectRef, connectionString, schema, sortByProperty = 'name' }: TablesVariables, + { + projectRef, + connectionString, + schema, + includeColumns = false, + sortByProperty = 'name', + }: TablesVariables, signal?: AbortSignal ) { if (!projectRef) { @@ -24,9 +34,12 @@ export async function getTables( let headers = new Headers() if (connectionString) headers.set('x-connection-encrypted', connectionString) - let queryParams = {} + let queryParams: Record = { + //include_columns is a string, even though it's true or false + include_columns: `${includeColumns}`, + } if (schema) { - queryParams = { included_schemas: schema } + queryParams.included_schemas = schema } const { data, error } = await get('/platform/pg-meta/{ref}/tables', { @@ -51,19 +64,19 @@ export async function getTables( if (Array.isArray(data) && sortByProperty) { return sortBy(data, (t) => t[sortByProperty]) as PostgresTable[] } - return data as PostgresTable[] + return data as Omit[] } export type TablesData = Awaited> export type TablesError = ResponseError export const useTablesQuery = ( - { projectRef, connectionString, schema }: TablesVariables, + { projectRef, connectionString, schema, includeColumns }: TablesVariables, { enabled = true, ...options }: UseQueryOptions = {} ) => useQuery( - tableKeys.list(projectRef, schema), - ({ signal }) => getTables({ projectRef, connectionString, schema }, signal), + tableKeys.list(projectRef, schema, includeColumns), + ({ signal }) => getTables({ projectRef, connectionString, schema, includeColumns }, signal), { enabled: enabled && typeof projectRef !== 'undefined', ...options } ) @@ -78,9 +91,9 @@ export function useGetTables({ const queryClient = useQueryClient() return useCallback( - (schema?: TablesVariables['schema']) => { + (schema?: TablesVariables['schema'], includeColumns?: TablesVariables['includeColumns']) => { return queryClient.fetchQuery({ - queryKey: tableKeys.list(projectRef, schema), + queryKey: tableKeys.list(projectRef, schema, includeColumns), queryFn: ({ signal }) => getTables({ projectRef, connectionString, schema }, signal), }) }, diff --git a/apps/studio/stores/pgmeta/MetaStore.ts b/apps/studio/stores/pgmeta/MetaStore.ts index e8a6eb8e922..eb08d545f0b 100644 --- a/apps/studio/stores/pgmeta/MetaStore.ts +++ b/apps/studio/stores/pgmeta/MetaStore.ts @@ -425,8 +425,9 @@ export default class MetaStore implements IMetaStore { const projectRef = project?.ref const connectionString = project?.connectionString const tables = await queryClient.fetchQuery({ - queryKey: tableKeys.list(projectRef, 'public'), - queryFn: ({ signal }) => getTables({ projectRef, connectionString }, signal), + queryKey: tableKeys.list(projectRef, sourceTableSchema), + queryFn: ({ signal }) => + getTables({ projectRef, connectionString, schema: sourceTableSchema }, signal), }) const duplicatedTable = find(tables, { schema: sourceTableSchema, name: duplicatedTableName })