はじめに
supabaseのリレーションを設定するために調べたのでそのまとめです。
SQL初心者の自分が、Supabaseでテーブル同士のリレーション（外部キー）を設定し、React + TypeScriptでデータを読み込みます。
GUIも使えるので簡単に設定できました！
やりたいこと
Todoアプリのような構成で、以下のようなリレーションを作る
-
projectsテーブル（プロジェクト） -
tasksテーブル（タスク） - 1つの project に複数の task が紐づく（1対多）
テーブル設計とSQL
リレーション方法を調べるとSQLでの作成方法の記載がありました
SQLって？
SQLは、データベースに命令を出すための言葉。
テーブル作成やデータ取得の命令文。
SQL Editor を使う
supabaseの SQL Editor を使ってテーブルを操作することができる
- Supabaseプロジェクトに入る
- 左のメニューで「SQL Editor」クリック
- コードを書いて「Run」で実行
create table projects (
id uuid primary key,
name text
);
create table tasks (
id uuid primary key,
project_id uuid references projects(id),
title text,
is_done boolean
);
すでにあるテーブルにリレーションを追加する
あとから外部キーを追加したい場合は ALTER TABLE を使う。
alter table tasks
add constraint fk_project
foreign key (project_id)
references projects(id);
これで tasks.project_id が projects.id を参照するようになる。fk_project は制約名で、任意の名前にできる。
外部キー制約を削除する
追加した外部キー制約を削除したいときは drop constraint を使う。
alter table tasks
drop constraint fk_project;
これで tasks テーブルから fk_project という外部キー制約が削除される。
Supabase GUIで追加する
すでにあるテーブルにリレーションを追加する
手順：
１. Supabaseの管理画面にアクセス
２. tasks テーブルの Edit Table を選択
３. Add foreign key relationship をクリック
４. 以下のように設定：
- Select a schema： public
- Select a table to reference to ：projects
- public.tasks：project_id
- public.projects：id
５. 「Save」で保存して完了！
外部キー制約を削除する方法（GUI）
手順：
１. Supabaseの管理画面にアクセス
２. tasks テーブルの Edit Table を選択
３. foreign keys の remove をクリック
４. リレーションの先頭に REMOVE が表示されたら、保存して完了
まとめと感想
- supabaseのGUIからリレーションの追加が簡単にできました！
- SQLもコードがあれば貼り付けるだけなのでGUI操作よりずっと便利
- SQLにどんどん慣れていくと良さそう
データ取得方法はこちら
JISOUのメンバー募集中！
プログラミングコーチングJISOUでは、新たなメンバーを募集しています。
日本一のアウトプットコミュニティでキャリアアップしませんか？
興味のある方は、ぜひホームページをのぞいてみてくださ！
▼▼▼