😇

Supabaseで自分のデータ以外を取得する

2024/05/31に公開

Flutter

Dart

Supabase

tech

Tips💡

フォロー機能を作ろうとまずは、ユーザーの情報をUIに表示するのをやろうとしたが、「クエリが間違ってるな...」ってことあって今まで全てのデータを表示していたことに気づいた😱

neqなるものを使うと自分の　idを指定すれば、表示されないようだ。今回は、uuid使ったテーブルでないので、ハートコーディングして、id1を渡してます。

Column is not equal to a value
Finds all rows whose value on the stated column doesn't match the specified value.

列の値が指定した値と一致しない
指定された列の値が指定された値と一致しないすべての行を検索します。


final data = await supabase
  .from('countries')
  .select('name, country_id')
  .neq('name', 'Albania');

モデルクラスを作る

取得した値を保持するエンティティがいるので作ってあげましょう。nullを許容できるように、 ?? をつけてます。

class UserState {
  final int id;
  final String name;

  UserState({
    required this.id,
    required this.name,
  });

  factory UserState.fromJson(Map<String, dynamic> json) {
    return UserState(
      id: json['id'] as int ?? 0,
      name: json['name'] as String?? '',
    );
  }
}

id1を検索しないように除外して、それ以外の全てのデータを取得して、イテレーターで反復処理して、リストに追加して保持させて、UIで表示すれば確認できると思います。mapで良いと思いすけどね笑
for文は、プログラミングの基本構文だから使ってみました。

Future<List<UserState>> yourNotUser() async {
    List<UserState> data = [];
    // 自分のユーザー情報だけテーブルから取得しない
    final response = await Supabase.instance.client
        .from('users')
         .select('*')
         .neq('id', 1);
    for (final item in response) {
      data.add(UserState.fromJson(item));
    }
    return data;
  }

sample code

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:follower_app/entity/user.dart';
import 'package:follower_app/view/sign_in_page.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

import '../entity/relationships.dart';

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  Future<List<UserState>> yourNotUser() async {
    List<UserState> data = [];
    // 自分のユーザー情報だけテーブルから取得しない
    final response = await Supabase.instance.client
        .from('users')
         .select('*')
         .neq('id', 1);
    for (final item in response) {
      data.add(UserState.fromJson(item));
    }
    return data;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        actions: [
          IconButton(
              onPressed: () async {
                // ログアウトするボタン.
                await Supabase.instance.client.auth.signOut();
                Navigator.of(context).pushReplacement(MaterialPageRoute(
                    builder: (context) => const SigninPage()));
              },
              icon: const Icon(Icons.logout)),
        ],
        title: const Text('Home'),
      ),
      body: FutureBuilder<List<UserState>>(
        future: yourNotUser(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.waiting) {
            return const Center(child: CircularProgressIndicator());
          }
          if (snapshot.hasError) {
            return const Center(child: Text('エラーが発生しました'));
          }
          return ListView.builder(
            itemCount: snapshot.data!.length,
            itemBuilder: (context, index) {
              final user = snapshot.data![index];
              return ListTile(
                title: Text(user.name),
                subtitle: Text('id: ${user.id}'),
              );
            },
          );
        },
      ),
    );
  }
}

こんな感じで自分以外のデータを表示しない

テーブルには、データは３件入ってますよ。　SELECT文だけだと、　full scanをして、パフォーマンスが落ちるらしいから、limitつけました。Pythonの仕事してたときは、SQL実行するときにつけないと怒られました😅

最後に

今回は、自分のデータ以外を取得して、UIに表示するのをやってみました。Supabaseで使えるSQLのクエリは知らないものが多いので、最近複雑なものを作ろうとすると詰まってしまいます😅
テーブル設計をゆっくり勉強したい（−＿−；）

Tips💡

モデルクラスを作る

sample code

最後に

Discussion