> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# データソースパネル

> YiDAのデータソース作成方法を解説。変数・リモートリクエスト・パラメータデータソースの3種類の使い分け、自動読み込み、willFetch/fit/didFetch/onErrorなどのコールバック関数、クロスオリジン対応やエラーハンドリングまで、エディション別の機能差を含めて詳しく紹介します。

| **機能**   | **Freeプラン** | **ベーシック版** | **プロフェッショナル版** | **専用版** |
| -------- | ----------- | ---------- | -------------- | ------- |
| 外部データソース | 非対応         | 非対応        | 対応             | 対応      |

## 1. データソースの作成

### 1.1 データソースの作成方法

「追加」ボタンをクリックして、新しいデータソースの作成を開始します。作成可能なデータソースは3種類あり、作成時に選択できます。作成後にタイプを切り替えることはできません。

* 変数：ローカル変数
* リモートリクエスト：サーバーサイド API から取得するデータ
* パラメータデータソース：システムがデフォルトで渡すデータソースで、現在の url に含まれるパラメータを取得するために使用します。例えば url が a.html?key1=value1\&key2=value2 の場合、パラメータデータソースの値は以下のようになります。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
  key1: 'value1',
  key2: 'value2'
}
```

### 1.2 変数データソース

変数データソースは通常、設定項目（リモート API プレフィックス apiUrlPrefix など）やページの一時変数などの保存に使用されます。string、object、array、Number、bool など、すべての JS データ型に対応しています。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
string: "string"
Number: 123
boolean: true / false
object: {"name": "gaokai"}
array: ["1", "2"]
null: null
```

### 1.3 リモートリクエスト

**API レスポンスのデータ形式**

リモートデータソースには、データ形式に関するいくつかの必須の制約があります。

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
{
    content: [], // content フィールドはデータを格納するために使用します。content のデータ構造に制約はありません。
    success: true // success はリクエストが成功したかどうかを示します
}
```

具体的な形式の制約については、[**natty-fetch**](https://github.com/oner-team/oner-io/blob/natty-fetch/docs/rules.md) のデータ制約をご参照ください。

**特記事項**：

上記 👆 の形式で返されるデータについては、リクエストのレスポンスコールバック関数（didFetch など、および最終的にデータプールに保存される値）では、content と success の階層は含まれなくなります。

非標準 API から返されるデータをデータソースが認識できるようにするには、fit 処理を1階層挟む必要があります。fit は本質的に、データリクエストの didFetch（データ取得）前に、生のレスポンスコンテンツを YiDA RPC のレスポンス仕様に準拠する形式へ変換するものです。具体的な使い方は下記 👇 の fit 使用説明をご参照ください。

自作の API サービスを使用する場合は、クロスオリジンの問題にご注意ください。JSONP を使用するか、自作の API サービス側で[**クロスオリジン**](https://www.baidu.com/s?wd=%E8%B7%A8%E5%9F%9F%E8%A7%A3%E5%86%B3%E6%96%B9%E6%A1%88\&rsv_spt=1\&rsv_iqid=0xb4bc961e002c4bf1\&issp=1\&f=3\&rsv_bp=1\&rsv_idx=2\&ie=utf-8\&rqlang=cn\&tn=baiduhome_pg\&rsv_enter=0\&rsv_dl=ts_0\&oq=%25E8%25B7%25A8%25E5%259F%259F%25E8%25A7%25A3%25E5%2586%25B3%25E6%2596%25B9%25E6%25A1%2588\&rsv_btype=t\&rsv_t=9447WFp%2FaXjCnHf21%2BpQbVggodBCHxIJ1kWR%2FKv8r%2FkP1SGPy8aAS62FCEEAtb9vrwrJ\&rsv_pq=fbe7a51d001b0915\&prefixsug=%25E8%25B7%25A8%25E5%259F%259F%25E8%25A7%25A3%25E5%2586%25B3%25E6%2596%25B9%25E6%25A1%2588\&rsp=0)を許可するように設定する必要があります。API サービス側での設定方法を推奨します。[**Cross-Origin Resource Sharing**](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS) をご参照ください（注意：YiDA のアプリはすべて https のため、指定のドメイン Access-Control-Allow-Origin: [https://www.yidaapps.com](https://www.yidaapps.com) を設定する必要があります）。

**HTTP メソッド**

リモートデータソースの読み込みには、3種類の HTTP メソッドがあります。

* GET
* POST
* JSONP（この方式はサーバーサイドでの対応が必要です）

### 1.4 自動読み込み

「自動読み込み」を有効にしたデータソースは、ページのレンダリング前にリモート API へリクエストを送信します。自動読み込みのすべてのデータソースの読み込みが完了した後に、ページのレンダリングが開始されます。通常、ページの初期データ読み込みに使用します。

**注意：「自動読み込み」のデータソースが多すぎるとページのレンダリング時間が長くなります。乱用しないでください。**

### 1.5 読み込み方式（先に「自動読み込み」オプションをオンにする必要があります）

**シリアル**：すべてのシリアルデータソースは、上から下へ順に実行されます。依存関係がある場合は、依存されるデータソースを先に配置する必要があります。

**パラレル**：すべてのパラレルデータソースは同時に実行されます。

リクエストによるページレンダリングのブロックを避けるため自動読み込みを選択したくないが、シリアル読み込みを実現したい場合は、現時点では「ページ読み込み完了時」関数内で手動でデータソースの読み込みをトリガーする方法があります。コード例：最初のリモートデータソースリクエストをトリガーし、リクエストが返された後に2番目のリモートデータソースリクエストをトリガーします。

### 1.6 リクエストの可否

真偽値を渡して、このリクエストを送信するかどうかを判定できます。この入力フィールドは変数式にも対応しており、リクエストを送信する必要があるかどうかを判定できます。

### 1.7 willFetch

リクエスト前処理関数。willFetch を使用すると、リクエストを送信する前に各種リクエストパラメータを変更できます。コード例：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function willFetch(vars, config) {
    // vars.data でクエリパラメータを変更できます
    // config.header でヘッダーを変更できます
    // config.url で url を変更できます
    vars.data.a = 1; // リクエストパラメータの 'a' を 1 に変更します
    config.url = 'https://www.taobao.com'; // リクエスト url を Taobao に変更します
    config.header['Content-Type'] = 'application/json'; // Content-Type を変更します
    console.log(vars, config); // 他にどのパラメータが変更可能か確認します。
}
```

### 1.8 fit

リクエスト戻り時のデータアダプター。fit を使用すると、リクエストの生のレスポンスを変更して、対応するデータリクエスト形式に適合させることができます。コード例：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function fit(response) {
  const content = (response.content !== undefined) ? response.content : response;
  const error = {
    message: response.errorMsg ||
      (response.errors && response.errors[0] && response.errors[0].msg) ||
      response.content || 'Remote Data Source request failed, success is false',
  };
  let success = true;
  if (response.success !== undefined) {
    success = response.success;
  } else if (response.hasError !== undefined) {
    success = !response.hasError;
  }
  return {
    content,
    success,
    error,
  };
}
```

### 1.9 didFetch

リクエスト完了コールバック関数。didFetch を使用すると、受信したデータを変更できます。fit と異なり、API から返される success が true の場合にのみ実行されます。コード例：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function didFetch(content) {
    content.b = 1; // 返されたデータ構造内の 'b' フィールドを 1 に変更します
    return content; // 重要：content を返す必要があります
}
```

### 1.10 onError

リクエストエラーハンドリング関数。onError はリモートデータソースの API エラーをキャッチするために使用されます。API から返される success が false の場合に実行されます。コード例：

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"}}
function onError(error) {
  console.log(error);
}
```

### 1.11 デフォルトデータ

デフォルトデータは通常、ファーストスクリーンのレンダリングシーンで使用されます。リモートデータソースのリクエストがまだ返っていない際に、初期のデフォルト値を提供します。注意：デフォルトデータのデータ形式は didFetch 層で返されるデータ形式であり、直接バインドして使用できます。

### 1.12 コネクタデータソース NEW

コネクタデータソースでは、コネクタをデータソースとして使用でき、システム間・Webページ間のクロスオリジンや認証の制限を突破することを目的としています。詳細はドキュメント カスタムデータコネクタを使用してクロスオリジン問題を解決する をご参照ください。

## 2. データソースの使用

### 2.1 コンポーネント内でのバインド

YiDA コンポーネントの属性設定パネルでは、属性に変数をバインドすることで動的な効果を実現できます。方法は以下の通りです。

* 変数をサポートするすべての属性には、下図のアイコンがあります。アイコンをクリックすると「変数バインドパネル」が開きます。

* 「変数バインドパネル」は以下の種類の変数のバインドに対応しており、クリックするだけで直接使用できます。

例：state.urlParams.type === 'test' ? '1' : '2'

### 2.2 開発者センター Trial 体験

* **このリンクをクリックしてお試しください**

## 3. FAQ

### 3.1 データソースリクエスト後にデータがない場合

以下をご確認ください。

* API パスと HTTP メソッドが正しいか。
* デフォルトリクエストが有効になっている、または手動呼び出しが有効化されているか。
* リクエスト対象の API サービスをホストするサーバーにアクセスホワイトリストの制限がないか。
* 入力パラメータの形式が誤っていないか。
* API が [www.yidaapps.com](http://www.yidaapps.com) からのクロスオリジンアクセスに対応しているか。
* API が https で、証明書が「安全」となっているか。

### 3.2 トラブルシューティング手順

1. データソースの読み込み方式が手動読み込みか自動読み込みかを確認します。手動読み込みの場合は、データソース読み込みのコード箇所にブレークポイントを設定してデバッグします。
2. ページをプレビュー／アクセスします。
3. ブラウザのコンソールを開きます。
4. データソースの読み込みをトリガーします。
5. コンソール内の該当リクエスト情報を確認し、トラブルシューティングを行います。

### 3.3 YiDA プラットフォーム API 呼び出し時に 307 エラーが発生する場合

社内でセカンドレベルドメインが有効化されているかご確認ください。セカンドレベルドメインが有効化されている場合は、API のアクセスアドレスを `www.yidaapps.com/...` から相対アドレス `/dingtalk/web/APP_X1X2X3X4/v1/process/startInstance.json` に変更することで、このエラーを回避できます。