Type-safety for Supabase

Type-safety with Supabase

Since the whole application is fully typed of course we included the ability to also type your supabase client.

1. Setting up supabase CLI

Before you can use the types you need to install the supabase CLI (opens in a new tab).

After you have installed the CLI you need to authorize it with your Supabase account. To do so navigate to https://app.supabase.com/account/tokens (opens in a new tab) and click Generate new token. Enter a name (e.g. CLI) and click Generate. Copy the token and save it.

Now run the following command in your terminal:

supabase login

You will be prompted to enter the token.

2. Generating the types

Now you can generate the types from your api schema. All you need to do is run the following command:

npm run generate:types

This will fetch the schema from the supabase server and generate the types for you in the types/supabase.ts file.

3. Using the generated types

Now you can use the types in your application:

import { Database } from '../types/supabase';
// get types supabase client
const supabaseClient = useSupabaseClient<Database>();
// get individual types of tables
type Client = Database['public']['tables']['clients']['row'];

The above code is just an example on how to use the types. You can find a working implementation in the components/app/clients/List.tsx file in the repository.