title | emoji | type | topics | published | ||
---|---|---|---|---|---|---|
【Supabase】Quickstarts (with Riverpod) |
⚾ |
tech |
|
true |
以前からSupabaseが気になっているものの、なかなか業務利用することができませんので、個人的に少しずつ触っていこうと思います。 まずは、以下のUse Supabase with Flutterに従って、countriesテーブルをselectしてみることから始めようと思います。
https://supabase.com/docs/guides/getting-started/quickstarts/flutter
以下のように、countriesテーブルの国名を一覧表示します。リロードボタンをタップすると、selectを再実行します。DevToolsからもリクエストが行われていることを確認できます。
Quickstartsに記載されているcountriesテーブルを作成しつつ、SQL Editorから100件insertしておきました。
selectするだけなので単純です。以下、コードの全量です。 https://github.com/motucraft/supabase_playground/blob/main/lib/main_select_countries.dart
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();
}
まずは単純にselectして応答を表示することができました。次はGraphQLでQueryしてみたいと思います。
https://zenn.dev/motu2119/articles/supabase-graphql-query-20240504