Supabaseで多対多を取得する

今回はSupabaseで多対多のテーブルを取得する方法を紹介します。

JavaScript libraryを使用しています。バージョンは ^2.42.7 になります。

ER図

今回は投稿記事のテーブルposts、タグテーブルtags、中間テーブルposts_tagsを作成している前提で進めます。
※投稿でタグは任意であるため、0ないし多数になる想定です。

投稿に関連するタグを取得するためにはどのような記述ができるでしょうか。

中間テーブルを明示して取得

posts_tagsをそのまま明示的に記述すると取得できます。
しかし、posts_tagsを挟むことでプロパティの扱いがやや煩雑になります。

const { data, error } = await supabase
  .from("posts")
  .select(`
    *,
    posts_tags (
      tags (*)
    )
    `)

直接テーブル名を指定する

実はposts_tagsテーブルを経由せずともtagsテーブルは取得可能です。
そこはSupabaseがうまくやってくれています。

const { data, error } = await supabase
  .from("posts")
  .select(`
    *,
    tags(*)
    `)

注意点

中間テーブルとのリレーション（外部キー制約）は確実に設定してください。この設定ができていないとうまく取得できません。

さいごに

いかがでしょうか。こちらの記事がSupabaseライフの一助になれば幸いです。