SupabaseのJavaScriptクライアントでテーブル結合を行う

Supabase の JavaScript クライアントでテーブル結合を行う方法をメモ。

www.npmjs.com

テーブルが以下のようにあるとします。ユーザーに紐づく投稿画像があり、その画像に対してコメントが付くようなイメージです。

# ユーザー
users:
  id: string
  fullname: string

# 投稿画像
photos:
  id: string
  userId: string（※foreign key relation: users.id）
  createdAt: Timestamp
  updatedAt: Timestamp
  title: string
  url: string

# 画像へのコメント
comments:
  id: string
  userId: string（※foreign key relation: users.id）
  createdAt: Timestamp
  updatedAt: Timestamp
  body: string
  photoId: number（※foreign key relation: photos.id）

photos を基準に comments と user を結合する

photos を基準に comments と user を結合する場合は以下のように記述します。

const { data: photos } = await supabase
    .from("photos")
    .select(`
      *,
      comments(*),
      user: userId(*), // こう書くことでプロパティ名を指定できる
    `)

photos に結合させた comments 内の user も結合させる（入れ子構造にする）

上記から少し発展させ、photos に結合させた comments に紐づく user も結合させる場合は以下のように記述します。シンプルに select 文を入れ子にすることで実現できます。

const { data: photos } = await supabase
    .from("photos")
    .select(`*, user: userId(*), comments(*, user: userId(*))`)