Supabase Cron & Queues を用いた非同期処理の実装

# はじめに
先日、[Supabaseにpgmqを組み込んで使ってみた](https://qiita.com/komishinnn/items/b72fc21f81d2fc5efde7)という記事を書きました。

この記事を執筆した当時は公式で利用できるQueuing Serviceが入っていなかったのですが、
昨日Supabase Launch Weekにて、[Supabase Queues](https://supabase.com/blog/supabase-queues)がリリースされました。

この記事では、実際にこの新機能を活用して非同期処理を実現する手順を紹介します。

# 今回の構成
Supabase Launch Weekで同様に強化されていた[Supabase Cron](https://supabase.com/blog/supabase-cron)も併せて利用して、以下の構成でやってみようと思います。

```mermaid
sequenceDiagram
    participant Browser
    participant Server as Supabase Server/API
    participant Queue as Supabase Queue
    participant Cron as Supabase Cron
    participant Edge as Edge Function

    %% メッセージ送信フロー
    Browser->>Server: メッセージ送信リクエスト
    Server->>Queue: Queue.enqueue(メッセージ)
    Queue-->>Server: 送信完了
    Server-->>Browser: 送信完了レスポンス

    %% 定期実行フロー (1分ごと)
    Cron->>Edge: スケジュール起動 (1分ごと)
    Edge->>Queue: キュー確認
    alt メッセージが存在する場合
        Queue-->>Edge: メッセージ内容取得
        Edge->>Edge: メッセージ処理実行
        Edge->>Queue: 処理完了後、メッセージ削除
    else メッセージが存在しない場合
        Queue-->>Edge: 空レスポンス (メッセージなし)
        Note over Edge: 処理スキップ
    end
```

# 今回作成したサンプルコード
今回試した内容はこちらからご参照ください
https://github.com/ShinnosukeKomiya/supabase-queue

# Supabase上の操作

まずは`Integrations`からQueueとCronを有効化します
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/01caf474-1aa1-a156-ace2-310902f7f0ac.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/3d9038cd-afac-3d7f-6969-1df8c94b723f.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/2a1132d3-39ca-7ba6-f14d-1ec3a3eb8589.png)

## Queue側の設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/837f066e-04b2-4354-3239-886c097425b9.png)

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/94797d08-4f4f-20fc-7684-519442bb437b.png)

最初の設定だとSupabase Clientからpgmqを参照できないので、
`Integrations > Queues > Settings`から以下の設定をONにします
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/a0e4df52-b04a-b0de-a636-00797f24c128.png)

## Cronの設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/2758c890-5a63-f619-3e87-b7c7398aef38.png)

毎分send mailを実行する設定
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/0c4c434b-ad42-ce13-a9cb-0253b08732c4.png)

Edgeを呼び出すには pg_net も有効にする必要があったので有効化
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/eb0b6c9d-7571-74e4-f33f-cba300177879.png)

有効化したので、対象のedge functionを選んで作成完了
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/4fcbd4e5-5e2d-48e5-6004-303b5f0328f0.png)

# 動作確認
画面上からメッセージを送る
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/40b1faaf-e497-3e25-d4ed-b95d7bb28c45.png)

SupabaseのQueue管理画面からメッセージが挿入されたことを確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/e10e5452-5fef-4326-3b3e-20124aa4ea2a.png)

無事メールが届いたことを確認できる
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/539913/5ff353ef-9e31-2d0e-4ea8-ce187d64f9b7.png)

# 最後に
SupabaseのLaunch Weekで様々な機能が公開されていたので、もっと色々と触ってみようと思います！