前のページはこちら
データの取得を行います。
Contents
コード変更
supabase_repository.dartのDBDataGetを下記のように変更します。
static Future<bool> DBDataGet({findString}) async {
try {
var getUserDatas = [];
var supabase = Supabase.instance.client;
final response = await supabase
.from('profiles')
.select('updated_at,username')
.like('username', '%${findString}%')
.execute();
(response.data as List).forEach((element) {
var userdata = GetUserData.fromJson(element);
getUserDatas.add(userdata);
});
if (response.error != null) {
print("エラーです" + response.error!.message);
throw new Exception(response.error);
}
return true;
} catch (e) {
print(e.toString());
return false;
}
}取得部分の解説
クエリライクなsupabaseのデータ取得コーディング
DBアクセス用オブジェクトSupabase.instance.clientに対し、クエリのようなメソッドチェーンの記載でデータの取得が出来ます。
例えば、下記のようなオーダーがあったとします。
- 対象テーブルは「profiles」
- 「username」に「たなか」が含まれている行
- 取得して欲しいのは「updated_at」と「username」
この場合のSQL構文は次のようになります。
SELECT [取得したい行] FROM [テーブル名] WHERE [検索行] LIKE [曖昧検索の条件];これを今回の事例に置き換えると・・・
SELECT updated_at,username FROM profiles WHERE username LIKE "%たなか%"こうなります。（解らない方でもSQL入門あたりですぐ出てくるので興味があれば調べてみると良いかも知れません。）
これがsupabaseのコードだとこうなります。少し順番が違ったりしていますが、ほぼ同じような書式になっている事が確認できます。
.from('profiles')
.select('updated_at,username')
.like('username', '%たなか%')
.execute();尚、今回は’%たなか%’の部分は’%${findString}%’として引数で受け取ったものをセットしています。
受取データの加工部分の解説
前回のデータ登録で、「たなかいちろう」「すずきじろう」「たなかさぶろう」を入れた人がデータ取得をすると、下記のようなJSONデータが返ってきます。
[{updated_at: 2022-02-08T01:30:47.724+00:00, username: たなかいちろう},
{updated_at: 2022-02-08T01:31:29.768+00:00, username: たなかさぶろう}]受け取りクラスとその配列の準備
supabase_repository.dartには、これを受け取るクラスが既に記載されていました。それを確認してみます。
fromJsonメソッドを定義して「username」をStringに、「updated_at」をDateTime型に変換しています。DateTimeへの変換方法は下記コードを参照ください。
class GetUserData {
String name = '';
DateTime update = DateTime.now();
GetUserData.fromJson(Map<String, dynamic> json)
: name = json['username'],
update = DateTime.parse(json['updated_at']);
}SupabaseRepositoryの先頭にはこのクラスの配列をgetUserDatasとして準備しており、またDBDataGetの最初でこれを初期化しています。
supabaseからの受取データを格納
ここでは下記の処理を行っています
- supabaseで受け取ったデータ（ここではresponse）をList変換し
- forEachで回しながら
- 1つ1つをfromJsonメソッドでjsonデータからGetUserData型に変換
- 変換したものをgetUserDatas配列に追加
(response.data as List).forEach((element) {
var userdata= GetUserData.fromJson(element);
getUserDatas.add(userdata);
});実行してみる
下準備の段階で、auth_page_view.dartではgetUserDatasをリスト化して受け取ったgetUserDataの「name（名前）」「update（更新時間）」を並べて表示する仕組みにしました。
Column(
children: SupabaseRepository.getUserDatas
.map((GetUserData item) => Row(
children: [
Text(item.name),
Text(':'),
Text(item.update.toString()),
],
))
.toList())前回入れたデータの状態で、「変更する名前」のテキストフィールドに「たなか」と入れてデータゲットを押すと「たなか」が含まれるデータの名前と更新日時が出てきます。
今後の勉強
基本的にSQLコマンドが解るとそこから調べる事も出来るのでSQLを学びながら、「supabase Like」のように検索をかけたりドキュメントを見たりすると良いかも知れません。(supabaseは『postgres SQL』となります)
前のページはこちら