> For the complete documentation index, see [llms.txt](https://docs.dashcomb.com/dashcomb-help-center/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/add-complicated-data-to-api-request.md).

# APIのリクエストに複雑なデータを入れる

Dashcombがサポートしている[UI Component](/dashcomb-help-center/ide/ui-component.md)とREST APIを利用して、APIのリクエストに複雑なデータを設定することができます。

## 準備

* このAPIの連携先になる管理画面を作成しておきます。

## 実現

<figure><img src="/files/sEhCA3IVPnDe971zyK73" alt=""><figcaption></figcaption></figure>

* [REST APIへの接続設定](https://docs.dashcomb.com/dashcomb-help-center/tips-and-tricks/pages/urC7HTEGAqXWjHZCvmFx#rest-apiへの接続設定-rest-api)画面でAPI設定します。
* 「エンドポイント」に `https://httpbin.org` を入力します。
* 「保存」ボタンを押すと、API接続の作成ができました。
* サブドメイン検証用に管理画面へ[Input](/dashcomb-help-center/ide/ui-component/input.md)をドラッグ＆ドロップします。
  * 例えば、オブジェクト名は `input1` とします。
* メールアカウント検証用に管理画面へ[Input](/dashcomb-help-center/ide/ui-component/input.md)をドラッグ＆ドロップします。
  * 例えば、オブジェクト名は `input2` とします。
* 管理画面の[クエリ領域](/dashcomb-help-center/ide/query-region.md)で「API」タブをクリックします。
* 「+」アイコンを押して、API名を作成します。
* データソースリストから先ほど作成したREST APIを選びます。
* 「実行前アクション」に「アクション無し」、「確認」、「承認」を選べることができます。
  * ここでは初期の「アクション無し」を選びます。
* 続いては「POST」を選びます。
* 「Bodies Type」に「x-www-urlencoded」を選びます。
* パラメータに `query` と `mutation {activate(input: {subdomain: "{{input1.value}}"email: "{{input2.value}}"})}` を入力します。
  * APIのリクエストにこういう多重なJSONなどの複雑なデータを入れることも可能です。
* 「成功時」、「失敗時」の「アクション」や「通知」を設定します。
  * 設定方法の詳細は[アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)にご参考ください。
  * ここでは全て初期の「アクション無し」を選びます。
* 「保存」ボタンを押すと、完了です。

## 参照項目

* [API接続](/dashcomb-help-center/ide/others/dtassu/api.md)
* [API経由のCRUD操作](/dashcomb-help-center/tips-and-tricks/api-crud.md)
* [Inputの使い方](/dashcomb-help-center/ide/ui-component/input.md)
* [アクションエディタ](/dashcomb-help-center/ide/property-region/action-editor.md)