[Supabase][Edge Function][Database WebHooks][Sample]データベースの操作時に情報を元に関数等で処理したい

# 前提
- Supabaseのアカウント、プロジェクト作成済
- Supabaseコマンドが使える状態
- ターミナルからSupabaseと疎通が出来ている状態
- リクエストする為の方法は説明していません。(POSTMAN、request用の操作)


# 対象
- テーブルに書き込み、更新、削除時に外部へ情報送信の実装が必要な方
- supabaseを使ってみたい方


# やりたい事
- データベースの操作時に情報を元に関数等で処理したい

# 期待値
- 選択されている箇所のログは、データベースへINSERTされた時、INSERTされた情報をEdge Functionで出力しています。
- [sample]テーブルに、"hoge3"をINSERT。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/bbc0a4ce-7a0f-8ceb-a108-17de24288103.png)


# 手順

### テーブルを作成する
- 説明を簡略化する為に、テーブルはカラムは以下の通りに設定します。
    - id: text // 変更
    - created_at: date // そのまま
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/a56b7448-f4cc-4342-7807-fe1137ddf379.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/2d68c217-995d-322a-3732-9beb104e00cd.png)


### Edge Functionを作成する
1 . コマンドを実行し、supabaseのfunctionコードを作成する
```
supabase functions new sample_function
// または npx supabase functions new sample_function
```


2 . 作成された[supabase]のディレクトリをエディターで展開します。
※ここではVS Codeを使用している事を想定し、以下の環境設定が必要です。
- Denoを使用できる様にする (Ctrl(cmd) + Shift + P)
    - initialize WorkSpace Configuration
    - 拡張機能でDenoをインストール
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/024a0485-bc60-fc2d-b0c2-afbc9a081103.png)

3 . 作成されたプロジェクトをVsCodeで展開し、下記の様にindex.tsを書き換えます。
- 受け取った情報を表示するだけのFunctionです。
```Typescript
serve(async (req) => {
  console.log("start log");
  const { record } = await req.json();
  console.log("record: ", record);

  return new Response(JSON.stringify(record), {
    headers: { "Content-Type": "application/json" },
  });
});

```

3 . 下記コマンドでSupabaseにデプロイ。
- xxxxxxxxxxxxxxxxの箇所はご自身のSupabaseアカウントの[Project Setting > General]から[Reference ID]を取得してください。
```
supabase functions deploy create_user_notify --project-ref xxxxxxxxxxxxxxxx
// または、　npx supabase functions deploy create_user_notify --project-ref xxxxxxxxxxxxxxxx
```

以下の様に出力されれば、FunctionがSUpabaseで使用出来る様になります。
```
Version 1.28.0 is already installed
Bundling 
Deploying sample_function (script size: 20.96kB)
Deployed Function create_user_notify on project xxxxxxxxxxxxxxxx
You can inspect your deployment in the Dashboard: https://app.supabase.com/project/xxxxxxxxxxxxxxxx/functions/uuid/details
```


### テーブルにWebHookを設定する
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/61e7a7db-106a-6013-f946-9deb0226922e.png)

1 . Database > WebHooksへアクセス
2 . Create new WebHooksから作成する

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/ee286f10-e81f-7794-0311-80d4ecdae98d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/374fddd9-f0d2-7460-5953-ad904311b34d.png)
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/aa0e6b3c-c16d-df1a-9104-47b1ea0a1dfa.png)



### インサートして試して、結果を見てみる
- 結果は、期待値参照
- SQL Editor > New Query
```SQL
insert into public.sample values('hoge3');

-- 実行が正常であれば
-- Success. No rows returned.と表示される
```
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3081664/32e3c7e9-1da5-f4d3-6e79-b37f399b4823.png)



### conclusion
- supabaseでのテーブル操作 ~ 情報を処理し、外部へ通信する設定が簡単すぎてやばい
- 外部に関数を公開する事なく内部で処理出来て超便利
- Discordで質問すると解決が早くなるが、対応者が神対応


# 参考情報
Edge Functions Quickstart
https://supabase.com/docs/guides/functions/quickstart

Getting SaaS-y with Stripe: Stripe payments and Database Webhooks - Supabase Happy Hour #14
https://www.youtube.com/live/JHHAvgIU-mk?feature=share&t=2076


# トラブルシューティング
**WebHookを消せなくなった時 (Tylerさん神対応ありがとうございます。)**
https://twitter.com/dshukertjrjp/status/1619334031560278016
https://discordapp.com/channels/839993398554656828/982210691517804594/1068891729249456149

**VsCode上で、supabaseのデプロイコマンドが動かない時**
Windowsでターミナルからのdeployが実行出来ない場合は、ターミナルをPowerShellや他のターミナルで試してみてください。
    - 記者はこちらの症状が発生し、Anaconda Promptから実行し出来ました。

# 関連情報
supabaseサポート(メールで問い合わせ等出来る: 無料版の場合はサポート外)
https://app.supabase.com/support/new

supabase DISCORD(日本語でしかもチャットで質問したい時※タイラーさんに負担がかかるので出来るだけ自助努力)
https://twitter.com/dshukertjrjp/status/1619296709812846593


# 関連キーワード
Edge Function, Function, Supabase, Database, PostgresSQL,
WebHook