Generic TypeScript for managing Supabase data

Question

I have this "types.ts" that i use for using the types generated with Supabase CLI more efficently

import { Database } from './database.types';

export type Tables<T extends keyof Database['public']['Tables']> =
  Database['public']['Tables'][T]['Row'];

export type Enums<T extends keyof Database['public']['Enums']> =
  Database['public']['Enums'][T];

The problem is that i can't manage to make this work with a query that needs to have a join...

The code would still work fine, so for example

type EventListItemProps = {
  event: Tables\<"events"\>
}

will let me access event.name and also event.table1.name, but the IDE tells me (obviously) that "Property 'table1' does not exist on type"

i was thinking that maybe something like

type EventListItemProps = {
  event: Tables\<"events"\> & {
    table1: Tables\<"table1"\>;
  };
}

would work, but i should do it for every case of SELECT with a join and that would be awful...If is possible i would like to have something more generic, that can adapt to most of the cases.

Thanks for any help, and forgive me for my english!

Answer 1

Supabase has a tool to generate the types for you (supabase-type-generator)

First generate the types

npx supabase gen types typescript --project-id "$PROJECT_REF" --schema public > types/supabase.ts
// or for local
npx supabase gen types typescript --local > types/supabase.ts

And then supabase can provide the type of any query like this:

const queryResult = supabase.from('events').select(`
  event_id,
  table1 (
    field1
  )
`)

type EventListItemProps = QueryData<typeof queryResult>

const { data, error } = await queryResult
if (error) throw error

const eventListItem: EventListItemProps = data