話題のSupabaseでサクッとTriggers機能を試してみた！

# はじめに
こんにちは！[かほ](https://twitter.com/kaho_eng)です♪🐥
現在、本業では技術広報業務やエンジニア業務などに従事しています。
また完全にプライベートで[TECH WOMAN KANSAI](https://twitter.com/TechWomanKansai)という**関西の女性エンジニア限定のコミュニティ**をゼロから立ち上げ、運営しています。
今回の記事では**Supabase**×**Next.js**を用いたアプリ開発において、**Triggers**機能を試してみた内容について説明します。

プロジェクトの立ち上げや認証周りの内容はすでに実装済です🙇‍♀️
まだ未実装の方は、下記の記事をご参考までに♪

https://qiita.com/KAHO23340582/items/8a7faf77222a599fb31c

https://qiita.com/kaho_eng/items/cb8d735b5b6ca1b3a6c5

https://qiita.com/kaho_eng/items/a37ff001ea9eae226183


# この記事の読者対象
・**Supabase**×**Next.js**でアプリを今後作ってみたい方
・**Supabase**の**Triggers**機能について知りたい方
・**Supabase**を今後使ってみたい方
・**Next.js**を使って高速でアプリを作りたい方


# 開発環境
```json:package.json
 "dependencies": {
    "@supabase/supabase-js": "^2.2.1",
    "eslint": "8.28.0",
    "eslint-config-next": "13.0.6",
    "next": "13.0.6",
    "react": "18.2.0",
    "react-dom": "18.2.0",
  },
  "devDependencies": {
    "@types/node": "^18.11.13",
    "@types/react": "18.0.26",
  }
```

# Triggers機能とは？
**Triggers**機能について、簡単に説明します🐣
指定のイベントと関数を紐付け、イベントの発生時に関数を起動させます。
この機能を用いて、今回はユーザーがプロジェクトにサインアップした際に、ユーザー情報をデータベースに自動挿入できるよう設定しています。

https://www.youtube.com/watch?v=0N6M5BBe9AE

上記は**Supabase**社が公式で公開しているYoutube動画です。
字幕と音声は英語ですが、参考にしたい方は是非ご視聴ください🙌

# テーブルを作成しよう
ユーザーが新規登録をした際に、同時に指定のデータベーステーブルに対してユーザー情報が自動登録されます。
そのため、ユーザー情報を登録するためのテーブルを作成します。

1. テーブルの基本構成を設定
テーブル名やテーブルの説明、カラムの追加を行います。
今回はユーザー情報を登録したいので、テーブル名は`profiles`と設定し、**RLS(Row Level Security)** は今回ONにします。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/97f88c21-9dd1-1715-13cd-191dcd90fd4d.png"  width="６00" height="130" />

1. idカラムに外部キー設定
SQL Editorで確認してみると`auth`スキーマの`users`テーブルから`Authentication`ですでに登録されているユーザー情報を取得できることが確認できます。(下記画像の前者が`Authentication`、後者が`SQL Editor`の画像です。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/4baf12ef-db67-c3bc-7c41-ba4ce9e95313.png"  width="６00" height="130" /><img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/b3b1d910-d3c2-3556-5c76-7347efe5be62.png"  width="６00" height="130" />
そのためprofilesテーブルのidに対して`auth`の`users`テーブルのidを外部キーに設定します。
先ほどのテーブル作成の`Columns`のid右横にあるリンクマークを押し、Editページに遷移します。


    `Select a scheme`にauthを選択、`Select a table to reference to`にusersを選択、`Select a column from users to reference to`カラムにidを選択しましょう。
全てを選択した後、Saveボタンを押して保存します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/1d76bde7-35a9-4fb2-6d5b-23f623d9d3fd.png"  width="500" height="130" />

# functionを作成しよう
次にTriggerを作成する前に、functionの作成を行います。
`Database`>`Functions`のページ右上にある`Create a new function`を押して作成します。
`Schema`はpublic、`Return type`はtriggerと設定します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/6e762888-b5bc-015f-49b7-97b46b03530e.png"  width="500" height="130" />
このfunctionにユーザー権限をつけるため`Show advanced settings`をONにします。
`Type of security`には2種類の選択が存在しますが、functionを作成したユーザーによって、functionが実行されるように設定を行うため、`SECURITY DEFINER`を選択します。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/888b4e4a-8256-5831-5947-26271f4027f4.png"  width="500" height="130" />

# Triggerを作成しよう
いよいよTriggerを作成します。
`Database`>`Triggers`のページ右上にある`Create a new trigger`を押して作成します。
1. `Name of trigger`にトリガーの名前を記載
1. `Table`には今回authスキーマのusersテーブルを用いるため、usersを選択します。
1. profilesテーブルに対して、ユーザー情報を挿入したいため、Insertをチェックします。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/ac46bdba-189f-698b-1e6b-80313b50e848.png"  width="500" height="130" />

1. `Trigger type`に対して、**3**のイベント(ユーザー情報が挿入される)はユーザーのサインアップ後に行われる設定にするため、`After the event`と設定します。
1. `Orientation`に対して、処理されたデータ行ごとにトリガーが1度起動するように設定するため、`Row`と設定します。
1. `Function to trigger`には、上記で設定したfunctionを設定します。<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/2eef9388-dc78-d3b1-3fd0-663fa089e5c7.png"  width="500" height="130" />

# 実際にデータベースに対してユーザー情報が自動登録されているか確認しよう
ユーザーがサインアップしたと同時に、profilesテーブルに対してユーザー情報が自動登録されているかを確認します🐥
まだ登録されていないGoogleアカウントを用いて、ユーザーのサインアップを行います。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/691cf969-8404-7084-5b5d-6c1e2e94a440.png" width="700" height="150" />
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1547587/bf6c5fa2-69e3-19f0-c97e-3cdf64316bb5.png"  width="700" height="130" />
前者の画像が`Authentication`のユーザー情報画面、後者の画像が`Table Editor`のprofilesテーブルの画面です。`Authentication`のUsers UID(赤枠)とprofilesテーブルのid(赤枠)の値が一致しています。

ユーザーがサインアップしたと同時に、profilesテーブルに対してユーザー情報が自動登録されていることを確認できました🐥

# Triggers機能のメリット
* Triggerの詳細を設定しやすい
    * イベントの内容がデータベースへの挿入、更新、削除のどれかを選択できたり、トリガーを行うタイミングがイベントの前or後などを選択できるため、設定内容が豊富である
* 外部キーの設定が容易
    * profilesのidに対してusersを紐付けた際に、思う通りの実装でなかった場合に、テーブルの編集から紐付けの解除が容易(SQLやデータベースの操作が苦手な方はかなり助かるのでは！？🐥)

# 最後に
これで実装はおしまいです！

今回は、**Supabase**×**Next.js**を用いたアプリ開発においてTriggers機能を試してみた内容について説明しました。
公式で説明されている文献は英語のものが多いため、日本語の文献等をお探しの方いましたらぜひ参考にしていただけると幸いです。
今後は主にフロントエンド周辺、コミュニティ運営、Tech PR(技術広報)の記事を中心に書いていく予定ですので、気になる方はぜひフォローをよろしくお願いします♪
また、[TECH WOMAN KANSAI](https://twitter.com/TechWomanKansai)という**関西の女性エンジニア限定のコミュニティ**に興味をお持ちの女性の方が周りにいましたら、ぜひご連絡ください！ではでは〜🐥

Twitterアカウント:https://twitter.com/kaho_eng

# 参考資料
https://qiita.com/KAHO23340582/items/8a7faf77222a599fb31c

https://qiita.com/kaho_eng/items/cb8d735b5b6ca1b3a6c5

https://qiita.com/kaho_eng/items/a37ff001ea9eae226183

https://www.youtube.com/watch?v=0N6M5BBe9AE