Repository: supabase/supabase
File: apps/studio/components/interfaces/TableGridEditor/SidePanelEditor/ForeignKeySelector/ForeignKeySelector.tsx (TypeScript)

Code before:

export const ForeignKeySelector = ({
  visible,
  table,
  column,
  foreignKey,
  onClose,
  onSaveRelation,
}: ForeignKeySelectorProps) => {
  const { data: project } = useSelectedProjectQuery()
  const { selectedSchema } = useQuerySchemaState()

  const [fk, setFk] = useState(EMPTY_STATE)
  const [errors, setErrors] = useState<{
    columns?: string
    types?: { sourceType: string; targetType: string }[]
    typeNotice?: { sourceType: string; targetType: string }[]
  }>({})
  const hasTypeErrors = (errors?.types ?? []).filter((x) => x !== undefined).length > 0
  const hasTypeNotices = (errors?.typeNotice ?? []).filter((x) => x !== undefined).length > 0

  const { data: schemas = [] } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })
  const sortedSchemas = schemas.sort((a, b) => a.name.localeCompare(b.name))

  const { data: tables } = useTablesQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
    schema: fk.schema,
    includeColumns: false,
  })

  const { data: selectedTable, isLoading: isLoadingSelectedTable } = useTableQuery<PostgresTable>(
    {
      projectRef: project?.ref,
      connectionString: project?.connectionString,
      schema: fk.schema,
      name: fk.table,
    },
    {
      enabled: !!project?.ref && !!fk.schema && !!fk.table,
    }
  )

  const disableApply = isLoadingSelectedTable || selectedTable === undefined || hasTypeErrors

  const updateSelectedSchema = (schema: string) => {
    const updatedFk = { ...EMPTY_STATE, id: fk.id, schema }
    setFk(updatedFk)

Review comment (performance):
this should be `[...schemas].sort`. The current approach sorts the data inside the RQ cache which may cause issues.

Or sort it in RQ fetch function.

Code after:

export const ForeignKeySelector = ({
  visible,
  table,
  column,
  foreignKey,
  onClose,
  onSaveRelation,
}: ForeignKeySelectorProps) => {
  const { data: project } = useSelectedProjectQuery()
  const { selectedSchema } = useQuerySchemaState()

  const [fk, setFk] = useState(EMPTY_STATE)
  const [errors, setErrors] = useState<SelectorErrors>({})
  const hasTypeErrors = (errors.types ?? []).length > 0
  const hasTypeNotices = (errors.typeNotice ?? []).length > 0

  const { data: schemas = [] } = useSchemasQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
  })
  const sortedSchemas = [...schemas].sort((a, b) => a.name.localeCompare(b.name))

  const { data: tables } = useTablesQuery({
    projectRef: project?.ref,
    connectionString: project?.connectionString,
    schema: fk.schema,
    includeColumns: false,
  })

  const { data: selectedTable, isLoading: isLoadingSelectedTable } = useTableQuery<PostgresTable>(
    {
      projectRef: project?.ref,
      connectionString: project?.connectionString,
      schema: fk.schema,
      name: fk.table,
    },
    {
      enabled: !!project?.ref && !!fk.schema && !!fk.table,
    }
  )

  const disableApply = isLoadingSelectedTable || selectedTable === undefined || hasTypeErrors

  const updateSelectedSchema = (schema: string) => {
    const updatedFk = { ...EMPTY_STATE, id: fk.id, schema }
    setFk(updatedFk)
  }

  const updateSelectedTable = (tableId: number) => {
    setErrors({})