Zenn
🔩

SupabaseのJavascript Client Library を使って複数のテーブルからデータを引っ張ってくる

2023/02/04に公開
JavaScript
PostgreSQL
Vue 3
supabase
tech

SupabaseのJavascript Client Libraryとは

こちらにあるようにJavaScriptでSupabaseのデータベースからデータを取得したり登録したりするための記法です。

https://supabase.com/docs/reference/javascript/introduction

これを使用して以下のような記法でデータを取得できます。

const { data, error } = await supabase
  .from('countries')
  .select('name')

複数のテーブルからデータを取得する

今回やりたいことは、このドキュメントの「Query foreign tables through a join table」というボタンを押した時に出てくるこのようなデータの取得方法です。この例ではusersとteamsの2つのテーブルからデータを取得しています。

supabaseでのサンプル
const { data, error } = await supabase
    .from('users')
    .select(`
      name,
      teams (
        name
      )
    `)

このように複数のテーブルからデータを取って来るためにはSQLのJOINを使うと簡単ですが、Javascript Client Libraryを使用する場合にはコツがあります。

Supabaseの管理画面でテーブルを作成する

SQLエディターでcreate tableコマンドを使って作成することもできます。ここでは管理画面のTable Editorから作成しましょう。

サンプルとして2つのテーブル「members」と「reports」を作成します。

membersテーブル

reportsテーブル
そしてreportsのmember_idをmembersのidと外部キーで結びます。

データの入力

それぞれのテーブルにデータを入れてみました。

membersテーブル

reportsテーブル
このようにして、それぞれ2つずつのデータが入っています。ちゃんと外部キーで関係がついているかを確認しましょう。
reportsテーブルのデータを表示すると、外部キーとなっているフィールドにはマークがついています。これを押してみましょう。

するとちゃんと外部のテーブルの該当データが表示されています。

これでデータの準備は完成です。

データの取得

さて欲しいデータはSQLっぽく書くとこんな感じでしょうか。

select members.name, reports.member_id, reports.created_at, reports.status 
from reports 
left join members on reports.member_id = members.id;

フロントエンドのフレームワークで使用する場合は、npmなどで'@supabase/supabase-js'を入れておきましょう。
https://supabase.com/docs/reference/javascript/installing

私はVueでこのように書きましたが、データ取得の部分は普通のJavaScriptです。

<script setup>
const route = useRoute();
import { createClient } from '@supabase/supabase-js';
const supabase = createClient(
    process.env.VUE_APP_SUPABASE_DATABASE_URL,
    process.env.VUE_APP_SUPABASE_SERVICE_API_KEY
);

const getReport =  async () => {
  const data = await supabase
      .from("reports")
      .select(`member_id, created_at,　status,
         members!inner (
          name
        )
      `)
  return data;
};
const reports = await getReport();
</script>

このようにすることで変数dataにJSON形式でデータを取得できました。
参考までに表示の部分もvueで書いておきます。

<template>
  <div>reports raw data: <pre>{{ reports }}</pre></div>
  <li
      :class='"listnum-item"'
      v-for="(item, index) in reports.data"
      :key="item.id"
  >
    <span v-if="item">{{ item.members.name }} {{ item.status }}
      {{ new Date(item.created_at).getFullYear() + "/" + (new Date(item.created_at).getMonth() +1 ) + "/" + new Date(item.created_at).getDate() }}
    </span>
  </li>
</template>

これを実行するとこのように、SupabaseのJavascript Client Library
を使って複数のテーブルからデータを引っ張ってくる事ができました！

Discussion