⚾

【Supabase】Quickstarts (with Riverpod)

2024/05/04に公開

Flutter

supabase

tech

1. はじめに

以前からSupabaseが気になっているものの、なかなか業務利用することができませんので、個人的に少しずつ触っていこうと思います。
まずは、以下のUse Supabase with Flutterに従って、countriesテーブルをselectしてみることから始めようと思います。

2. 挙動

以下のように、countriesテーブルの国名を一覧表示します。リロードボタンをタップすると、selectを再実行します。DevToolsからもリクエストが行われていることを確認できます。

3. テーブル作成

Quickstartsに記載されているcountriesテーブルを作成しつつ、SQL Editorから100件insertしておきました。

4. コード

selectするだけなので単純です。以下、コードの全量です。

Supabase.initializeの箇所で、flutter_dotenvを使用しています。
Project URLやProject API keysは、Supabase ConsoleのAPI Settingsから確認することができます。

  final url = dotenv.env['SUPABASE_URL'];
  final anonKey = dotenv.env['SUPABASE_ANON_KEY'];

  if (url?.isNotEmpty != true || anonKey?.isNotEmpty != true) {
    throw StateError('Supabase URL and Anon Key must be provided.');
  }

  await Supabase.initialize(url: url!, anonKey: anonKey!);

Countriesウィジェットでは、以下のProviderをwatchしてselect結果を表示しています。リロード時には、このProviderをinvalidateすることで再取得しています。

@riverpod
class CountriesNotifier extends _$CountriesNotifier {
  @override
  Future<List<PostgrestMap>> build() =>
      Supabase.instance.client.from('countries').select();
}

5. おわりに

まずは単純にselectして応答を表示することができました。次はGraphQLでQueryしてみたいと思います。

GitHubで編集を提案