結果の加工

以下のコンポーネントには、「結果の加工」というアクションの実行結果を加工する機能があります。

ユースケース

アクションの結果が複数ある場合

アクションの種類によっては複数の結果が返ってくることがあります。例えば、MySQLアクションではクエリを複数登録でき、それぞれのクエリに対応する実行結果が返ってきますが、デフォルトでは結果がいくつかあっても必ず1つ目の結果が表示に利用されます。そういったケースでも、「結果の加工」を使えばどの結果を表示するか選択できます。

データの抽出

コンポーネントにはそれぞれ要求される実行結果の形式がありますが、アクションが必ずしもそれを満たした結果を返すとは限りません。例えば、次のような配列のデータはそのままテーブルコンポーネントで表示可能です。

[
  { id: 1, name: "山田太郎" },
  { id: 2, name: "山田花子" },
];

しかしアクションが次のように上記のデータをdataで包んで返す場合は、そのままでは表示できません。このようなケースはHTTP APIアクションでしばしば見られます。

{
  "data": [
    { "id": 1, "name": "山田太郎"},
    { "id": 2, "name": "山田花子"},
  ]
}

そんな場合は、「結果の加工」でdataを使うように指示することで表示が可能になります。

使い方

結果の加工はJavaScriptのコードを通して行ないます。

export defaultで結果を加工する関数を定義してください。関数の戻り値がコンポーネントに表示されるデータとなります。デフォルトでは次のようなコードが設定されています。これは「結果の加工」を使わない場合と同じ挙動のコードです。

export default (results) => {
  return results[0].success;
};

引数

定義した関数には、第一引数としてアクションの実行結果が渡されます。先述したとおり、アクションは複数の結果を返すことがあります。そのため、第一引数として渡されるresultsは配列になっています。

また、実際に渡される引数の値は「引数の値」をクリックすることで閲覧できます。

例

例えば、2つ目の実行結果を使いたい場合は以下のように関数を定義してください。

export default (results) => {
  return results[1].success; // results[0]ではなくresults[1]
};

また、実行結果が{ data: [/* ... */] }のようにdataで包まれている場合は、以下のようにdataを使うように関数を定義できます。

export default (results) => {
  return results[0].success.data;
};

式クエリパラメーター設定