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.

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) {

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<PostgresTable[] | undefined>({
     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={
         <span>
           Edit foreign key relation{' '}
@@ -256,8 +257,7 @@ const ForeignKeySelector = ({
             <Listbox.Option key="empty" value={1} label="---">
               ---
             </Listbox.Option>
-            {/* @ts-ignore */}
-            {sortBy(tables, ['schema']).map((table: PostgresTable) => {
+            {sortBy(tables, ['schema']).map((table) => {
               return (
                 <Listbox.Option key={table.id} value={table.id} label={table.name}>
                   <div className="flex items-center gap-2">

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,
 }

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<string, string> = {
+    //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<PostgresTable, 'columns'>[]
 }
 
 export type TablesData = Awaited<ReturnType<typeof getTables>>
 export type TablesError = ResponseError
 
 export const useTablesQuery = <TData = TablesData>(
-  { projectRef, connectionString, schema }: TablesVariables,
+  { projectRef, connectionString, schema, includeColumns }: TablesVariables,
   { enabled = true, ...options }: UseQueryOptions<TablesData, TablesError, TData> = {}
 ) =>
   useQuery<TablesData, TablesError, TData>(
-    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),
       })
     },

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 })