はじめに
JISOU の課題でプロフィール、得意なスキル、SNS を登録するフォームを作成しました。
- 課題でチャレンジしたこと
- supabase で多対多な関係のレコードを登録
- supabase で UUID を主キーに設定
- react router を使ったルーティング
工夫してみたところ
supabase で多対多な関係のレコードを登録
Rails だと中間テーブルは特に意識せずしれっと作ることが多いですが、いざ SQL でやるとなると違った考え方になるので楽しいですね。supabase ではクライアントからトランザクションを実行できないようで（※）プロシージャを作るのが普通のようです。
トランザクションを実行できないのは流し読みしてた記事にあったのですが情報元は不明です。
CREATE OR REPLACE FUNCTION public.insert_user(
name varchar,
description text,
skill_id integer,
github_id varchar,
qiita_id varchar,
x_id varchar
)
RETURNS varchar
AS $$
declare
user_id varchar;
begin
INSERT into users
(id, name, description, github_id, qiita_id, x_id)
values (gen_random_uuid(), name, description, github_id, qiita_id, x_id)
returning id
into user_id;
INSERT into user_skill
(skill_id, user_id)
values (skill_id, user_id);
RETURN user_id;
END $$ language plpgsql;
users テーブルの主キーは UUID を想定して varchar としているので gen_random_uuid を呼び出して生成しています。
プロシージャを追加したときも型定義を更新する必要があります
react router を使ったルーティング
Rails router より優秀かな？と思いました。多分、思想の違いで優劣つけるものじゃないですが。例えば、
<Routes>
<Route path="cards/register" element={<Register />} />
<Route path="cards/:id" element={<Card />} />
</Routes>
このように定義すると次のような URL にアクセスすると該当するコンポーネントを描画します。
-
/cards/register
Register コンポーネントを描画 -
/cards/sample-id
Card コンポーネントを描画
これを順序逆にしても問題なく動きます。この点が Rails と違いますよね。Rails 8 は知りませんがそれ以前だと最後に定義した内容が優先されるはずなので /cards/register は id が register として理解されて期待するコンポーネントを描画することはありませんでした。
終わりに
課題に取り組むとき react router が v7 へバージョンアップしていました。情報が少なく困りましたが、やはり本家サイトはわかりやすく不安を払拭できました。