前のページはこちら

【Function編】テーブルデータ取得

SupaBaseで作ったFunctionをFlutterで呼び出してみます。RCP(Remote Procedure Call)とも呼ばれFlutterではその関数を用います。

APIの実体

左メニューの「API」タグをクリックすると、真ん中あたりに「Stored Procedures」という欄があり、追加した関数群も登録されています。

右上には関数の使い方も記載されて便利なのですが、現在はJavaScript用でまだDart用ものは書かれていないようです。

コード修正

supabase_repository.dartへのメソッド追加

supabase_repository.dartに、下記のCallSupabaseFunctionメソッドを追加してください。

  static Future<bool> CallSupabaseFunction() async {
    try {
      var supabase = Supabase.instance.client;
      final response = await supabase.rpc('join_table_get', params: {
        'year_number': 2000,
      }).execute();
      print(response.data);

      return true;
    } catch (e) {
      print(e.toString());
      return false;
    }
  }

auth_page_view.dartに呼び出しを書く

auth_page_view.dartの

_image == null ? Text('No image selected.') : Image.file(_image!),

の下に下記コードを追加します。

        const SizedBox(height: 30),
        ElevatedButton(
          onPressed: () async {
            SupabaseRepository.CallSupabaseFunction();
          },
          child: Text('クエリの呼び出し'),
        ),

実行

実行すると、クエリの呼び出しボタンがあるので押してみます。

そうすると、ログに文字列が出てきます。

解説

SupabaseのRCP呼び出しは下記コードとなります。

      final response = await supabase.rpc('join_table_get', params: {
        'year_number': 2000,
      }).execute();

supabase.rpc関数の第一引数には呼び出す関数名となり、第2引数は下記のように引数名と内容を記載していきます。（今回はパラメータが1つだけでした）

param:{'引数名':内容, '引数名':内容, '引数名':内容, ...}

エラーが無ければresponse.dataにデータが入ってきます。

(おまけ)JSONから取得

詳しいコーディングは割愛しますが、取得したデータをJSONから取り出す事も出来ました。

以前のDB編と同じようにsupabase_repositoryに下記クラスを定義します。

class GetGameData {
  int id = 0;
  String title = '';
  String genre = '';
  int year = 0;

  GetGameData.fromJson(Map<String, dynamic> json)
      : id = json['game_id'],
        genre = json['game_genre_name'],
        title = json['game_name'],
        year = json['game_release_year'];
}

その後、await supabase.rpcの後に下記コードを追加、

      List<GetGameData> getGameDatas = [];

      (response.data as List).forEach((element) {
        var getgamedata = GetGameData.fromJson(element);
        getGameDatas.add(getgamedata);
      });

      print(getGameDatas[1].title);

これで、ゲームタイトルが表示される事を確認しました。

次のページはこちら

Flutter勉強おっさんの学習帳