🦣

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

2023/02/22に公開

Flutter

Supabase

tech

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

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

今回使用したコード

データを取得するためのプロバイダー。公式のサンプルのFutureBuilderとやってることは同じです。
こちらが公式のコードが書いてあるページ

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});

  @override
  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});

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

実行結果

まとめ

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