How do I use generated database types?

[gergely-xyz]

I would like to use the types generated with the supabase cli. #90 was closed as completed so I'm assuming this is possible, but I can't seem to make it work.

I've generated the types of my database: supabase gen types typescript --linked > supabase/schema.ts

And added the following to my nuxt.config.ts:

import { Database } from './supabase/schema'
export default defineNuxtConfig({
// ...
  supabase: {
    client: {
      db: {
        schema: Database,
      },
    },
  },
// ...
}

The documentation references this for available options. I expected type hints to show up as shown here.

[tomvoet]

Hi, you just need to add the Database interface as the type parameter in the angle brackets '<>'.

const supabase = useSupabaseClient<Database>();

This should probably do the trick :)

[ozum]

It would be a better DX if we can add this to the module configuration to be automatically used for every useSupabaseClient call.

export default defineNuxtConfig({
  // ...
  supabase: {
    types: "~/types/database"
  }
}

Just for this purpose, I also created a PR (#160) to make auto imports optional, so I can create my own composable which adds types and reexports the client.

/composables/useSupaClient.ts

import type { Database } from "~/types/database";
export default () => useSupabaseClient<Database>();

Currently, I have to use a different name, because auto imported composables overwrite the local composables with same name.

Problem is, other developers may not know that there is a useSupaClient composable and use by mistake auto imported useSupabaseClient composable.

[zernonia]

I agree that adding types in config will improve DX by a huge factor. I wouldn't want to keep importing the same types over and over again in components/composables.