【FlutterFlow】Supabaseと連携して別テーブルの名称（例：カテゴリ名）を表示する方法

今回は、商品リストを表示する際に、別テーブルのカテゴリ名を表示する方法を解説します。

通常、例えばproductテーブルにあるカテゴリIDを表示することは簡単ですが、それは別テーブルのカテゴリ名を指すIDに過ぎないため、より詳しい情報を欲しい場合には足りないことがあります。これを解決するためにSupabaseのAPIを使って、別テーブルのカテゴリ名を合わせて取得し、新たなテーブルにして表示する方法を説明します。

Supabaseは非常に柔軟で強力なAPIを提供しており、複数のテーブルをシームレスに連携させることで、システム全体のデータの可視性と使いやすさを向上させることができます。

今回のシチュエーション

上の画像は、商品リストを表示し、別のテーブルにあるカテゴリの名称を取得して表示したものです。

データベースはSupabaseを使って以下のように商品を格納するproductとカテゴリを格納するcategoriesを準備しています。productテーブルにあるcategoryは外部キーとしてcategoriesと繋がっています。

SupabaseのAPI呼び出しを使用したデータ取得

Supabaseのデータベース構築

• 「product」テーブルに、カテゴリIDを表すコラムを作成します。このカテゴリIDは、「categories」テーブル内のそれぞれのカテゴリに関連付けられた一意の識別子です。
• 別の「categories」テーブルには「カテゴリID(id)」と「カテゴリ名称(name)」が含まれます。
• これにより、テーブル間で情報をリンクし、必要に応じてカテゴリ名やその他の情報を簡単に取得できるようになります。

APIの呼び出しによるデータ取得

• SupabaseのAPIを使って簡単にデータを取得します。SupabaseのAPIは非常に直感的で、シンプルなリクエストで複雑なデータの取得を実現できます。
• 以下のような形でAPI呼び出しを行うことで、カテゴリ名も含めた商品情報を取得することが可能です。[apiUrl]は利用されているsupabaseのURLを設定してください。

[apiUrl]/rest/v1/product?select=id,name,description,category(name,id)

• このAPI呼び出しによって、「product」テーブルに記載された「category」IDを使用して「categories」テーブルからカテゴリ名称を取得し、関連付けられた情報を含んだ形でデータを取得することができます。
• 以下が取得した結果になります。

ページ作成

Page stateに商品リストデータを格納

• 商品リストを表示するページのPage StateにAPIから取得した商品リストのJSONを格納するよう、設定します。

• ページロード時に先ほど作成したAPIを使って商品リストを取得し、Page Stateに格納します。

データテーブルの配置

画面にData Tableを配置します。（※すでに値を設定した画像になっています、、、もちろん最初は空です）

• Data tableのデータにはPage Stateの商品リスト（productList）を設定します。

• テーブルの左から順に商品名、カテゴリ名、商品説明を設定します。以下、上から商品名、カテゴリ名、商品説明の設定内容になります。

これで商品名とその商品に紐づくカテゴリ名を表示可能となります。

おわりに

Supabaseを使えば、複数テーブルのデータ取得が非常に簡単です。これにより、効率的なデータ管理や迅速なプロトタイプ構築が可能です。

同じことをSupabaseのAPIを使わずに実現しようと思うと中々に面倒です。（出来ないことはありませんが、アプリ上でデータの紐づけをしたりするのでシンプルには作れません。もしかするといい方法があるかもしれませんが）

SupabaseのAPIは非常に柔軟でSupabase自体がリレーショナルデータベースを使っているため、このような処理をかなり容易に実現可能になっています。

是非、うまく活用してみてください。