クイックスタート

今回は以下の機能を実現する社内向け管理画面を構築して、Querierの基本的な使い方を紹介します。

データを連携する

今回はすでに接続されている [Onboading DB] を使用するので、接続の設定などは必要ありません。

ご自身のデータソースを接続した方は、こちらをご覧ください。

SELECT * FROM users LIMIT 20;

listUsers の横の[実行する] をクリックします。
配置された [テーブル] をクリックし、右側の設定項目の データ を {{ listUsers.data }} に変更すると、データがマッピングされます。

SELECT * FROM users WHERE email LIKE '%{{ input1.value }}%' LIMIT 20;

右側の [コンポーネント] から [カラム] をキャンバスにドラッグ＆ドロップします。
[カラム] の左側にすでに配置されているテーブルを移動します。
[カラム] の右側に新しく [インプット] を配置します。
3で配置したインプットの [エディター] の [ラベル] に メールアドレスを更新 と入力します。
3で配置したインプットの [エディター] の [Default value] に {{ table1.selectedRow.data.email }} と入力します。
[ボタン] を3で配置したインプットの下に配置します。
6で配置したボタンの [エディター] の [ラベル] に 更新 と入力します。
[カラム] のアジャスターを動かして、幅を調整します。
[データフローリスト] に戻り、 [新規作成] をクリックします。
[データフロー] の下のテキストインプットにある、データフローの名前を updateUserEmail という名前に変更します。
[Onboarding DB] というMySQLのデータソースを選択します。
[SQL] に、以下のSQLを記述します

UPDATE users
SET email = '{{ input2.value }}'
WHERE id = {{ table1.selectedRow.data.id }};

[成功時に実行するアクション] で、 listUsers データフローを選択します。これをすることによって、 updateUserEmail が実行された後に、 listUsers が実行されるので、テーブル情報が最新の状態に保たれます。
6で配置したボタンの [エディター] から [イベントを追加する] をクリックします。
[データフロー] に updateUserEmail を選択します。これをすることによって、ボタンが押された直後に updateUserEmail が実行されます。