☠️

SupabaseでTypeScriptを使う場合の準備

2023/10/01に公開

Next.js

はじめに

公式ドキュメントを参考に手順をまとめました。

Supabase CLIをインストールする

$ npm install supabase --save-dev

Supabaseにログインする

以下を実行すると

$ npx supabase login

アクセストークンの入力待ちとなります。

You can generate an access token from https://supabase.com/dashboard/account/tokens
Enter your access token:

メッセージの指示に従い https://supabase.com/dashboard/account/tokens へアクセスしてアクセストークンを生成します。

Generate new tokenをクリックします。

適当な名前を入力してGenerate tokenをクリックします。

生成されたトークンをコピーします。

ターミナルへ戻り、アクセストークンを貼り付けてログインを試みます。
以下が表示されれば成功です。

Finished supabase login.

検証用テーブルを用意する

SupabaseのSQL Editorを使ってテーブルを用意します。

create table public.movies (
  id bigint generated always as identity primary key,
  name text not null,
  data jsonb null
);

DB用の型を生成する

publicスキーマにある各テーブルの型を生成します。

以下を実行します。

$ npx supabase gen types typescript --project-id リファレンスID > database.types.ts

自動生成されたdatabase.types.tsは以下のような内容になります。

export type Json = string | number | boolean | null | { [key: string]: Json | undefined } | Json[]

export interface Database {
  public: {
    Tables: {
      movies: {
        Row: {
          id: number
          name: string
          data: Json | null
        }
        Insert: {
          id?: never
          name: string
          data?: Json | null
        }
        Update: {
          id?: never
          name?: string
          data?: Json | null
        }
      }
    }
  }
}

今後テーブルが追加されたりテーブル情報が更新されるたびにこれを実行する必要があります。

使い方

以下のように既述することによって型付けされているmoviesを取得することができます。

import { createClient } from '@supabase/supabase-js';
import { Database } from './database.types';

const supabase = createClient<Database>(
  process.env.SUPABASE_URL,
  process.env.SUPABASE_ANON_KEY
);

const { data: movies, error } = await supabase.from('movies').select(*);

変数宣言時に型注釈する場合は以下のように書けます。

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

let movie: Tables<'movies'>;