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.