🦣

Supabaseのデータを一度だけ取得

2023/02/22に公開

リアルタイム以外でやってみた!

Supabaseのデータをリアルタイムではなくて、一度だけ取得する方法をRiverpodのFutureProviderでできるか試してみたいなと思い実験してみました。
そしたら、いい感じで全てのデータを取得できました。

今回使用したコード

データを取得するためのプロバイダー。公式のサンプルのFutureBuilderとやってることは同じです。
こちらが公式のコードが書いてあるページ
https://supabase.com/docs/guides/getting-started/quickstarts/flutter

utils/notes_provider.dart
// Supabaseから一度だけデータを取得するプロバイダー.
final notesFutureProvider = FutureProvider<List<Map<String, dynamic>>>((ref) async {
  return await Supabase.instance.client
      .from('notes')
      .select<List<Map<String, dynamic>>>();
});

データを画面に表示するページ

notesテーブルのbodyカラムの内容を表示します。

ui/notes_future.dart
import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:supabase_notes/presentation/utils/notes_provider.dart';

class NotesFuture extends ConsumerWidget {
  const NotesFuture({super.key});

  
  Widget build(BuildContext context, WidgetRef ref) {
    // AsyncValue型が帰ってくるので、こちら指定する.
    AsyncValue config = ref.watch(notesFutureProvider);
    return Scaffold(
      appBar: AppBar(
        title: const Text('Future'),
      ),
      body: config.when(
        loading: () => const CircularProgressIndicator(),
        error: (err, stack) => Text('Error: $err'),
        data: (notes) {
          return ListView.builder(
            itemCount: notes.length,// なぜかコードの保管機能で出てこない?
            itemBuilder: (BuildContext context, int index) {
              final note = notes[index];
              return ListTile(
                title: Text(note['body']),
              );
            },
          );
        },
      ),
    );
  }
}

アプリを実行するコード

import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:supabase_flutter/supabase_flutter.dart';
import 'package:supabase_notes/presentation/ui/note_future.dart';
import 'package:supabase_notes/presentation/ui/note_stream.dart';
import 'package:supabase_notes/presentation/utils/notes_notifire.dart';
import 'package:supabase_notes/presentation/ui/notes_page.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // .envを読み込めるように設定.
  await dotenv.load(fileName: '.env');
  await Supabase.initialize(
    url: dotenv.get('VAR_URL'), // .envのURLを取得.
    anonKey: dotenv.get('VAR_ANONKEY'), // .envのanonキーを取得.
  );
  runApp(ProviderScope(child: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: NotesFuture(),
    );
  }
}

実行結果

まとめ

Supabaseに最近ハマってしまって色々試しています。これが普及したら、多分フロントエンドだけ開発ができるようになるのではないかと思っていたりします。

こちらが実験用のサンプル

https://github.com/sakurakotubaki/SupabaseNotesApp

Flutter大学

Discussion