⚾
【Supabase】Quickstarts (with Riverpod)
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することで再取得しています。
class CountriesNotifier extends _$CountriesNotifier {
Future<List<PostgrestMap>> build() =>
Supabase.instance.client.from('countries').select();
}
5. おわりに
まずは単純にselectして応答を表示することができました。次はGraphQLでQueryしてみたいと思います。
Discussion