Is there a better way to access Supabase generated TS types?

Question

I have created a table called customer in my supabase db. Generated my types using

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

In my React app this is how I am referencing the generated types.

const [customerDetails, setCustomerDetails] = useState<Database["public"]["Tables"]["customer"]["Row"]>()

Can it be a bit more cleaner, like this?

const [customerDetails, setCustomerDetails] = useState<customer>()

Answer 1

You could use something like this

https://github.com/FroggyPanda/better-supabase-types

to post-process the types that supabase generates. That will generate a new schema file with content like this

export type Account = Database['public']['Tables']['accounts']['Row'];
export type InsertAccount = Database['public']['Tables']['accounts']['Insert'];
export type UpdateAccount = Database['public']['Tables']['accounts']['Update'];

If you don't want another dependency or write your own post-processor script, you could also improve the types with some helper types as suggested here:

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

Which will lead to

import { InsertDto, Row, UpdateDto } from '@src/interfaces/database';

export type Location = Row<'location'>;
export type LocationInsertDto = InsertDto<'location'>;
export type LocationUpdateDto = UpdateDto<'location'>;