Retoolは、任意のHTTP APIにリクエストを実行できます。一般的なワークフローは次のようになります。独自の内部APIからデータをGETし、そのデータをTableコンポーネントにレンダリングしてから、データ(パスワードのリセットなど)を独自のAPIにPOSTします。その他のワークフローとしては、以下が挙げられます。

• カスタム認証を使用して、内部APIのRESTリソースにAPIリクエストを実行します。
• パブリックAPI、すなわちGoogle Places APIに、RESTクエリーを含む個別APIリクエストを実行します。
• POSTリクエストでファイルをアップロードします。
• SOAPをサポートするAPI、すなわちBing Ads APIに、APIリクエストを実行します。

REST API

RetoolにおけるREST APIは、以下のよく知られた仕様となっています。

• URI (Uniform Resource Identifier、すなわち/wiki/what_is_an_api)
• HTTPプロトコル
  • データを取得するGET
  • 新しいデータを書き込むPOST
  • 既存のデータ・フィールドを更新するPATCH
  • 既存のデータを置換するPUT
  • 既存のデータを削除するDELETE
• リクエスト・データとレスポンス・データの両方のデータ・フォーマットとしてのJSON

REST APIへの接続

RetoolでのREST APIの照会方法は次の2つがあります。

1. 複数のアプリケーションで再使用するように、リソース・ページでREST APIを追加する
2. アプリケーション内でRESTQueryタイプを使用する

REST APIへの照会

リソースに接続した場合でもクエリー・エディターでURLを直接追加した場合でも、次のように、QueryのURLフィールドとURL Paramsセクションを使用してパス・パラメーターおよびURLパラメーターを送信できます。

• パス・パラメーターをURLの一部として含め、/users/{{ table1.selectedRow.data.id }}のようにプレースホルダーを使用して参照することができます。
• URL ParamsセクションにURLパラメーターを列挙できます。パラメーターはURLの末尾に?に続いて、キーと値のペアで、&で区切られて付加されます(つまり、?id=1&type=new)。

GETリクエストの例を以下に示します。

テーブル・コンポーネント(table1)の現在選択されている行を参照するJavascriptを波括弧を使用して記述していることに注目してください。URL parametersフィールドにそのJavascriptを記述でき、それが自動的にURLに変換されます。

POST、PATCH、およびPUTリクエストの場合は、リクエスト本体をBodyセクションに含めて、リクエストとともにデータを送信することができます。

APIリクエストでのJSON本体の使用

JSONリクエスト本体の作成を始めるには、リクエスト・テンプレートのBodyセクションでJSONを選択します。用意されたkey-valueインターフェイスを使用して簡単にJSONオブジェクトを作成できることが分かります。

より複雑な構造を作成するには、以下のように、オブジェクトをキーの子としてネストします。

別の方法としては、key-valueインターフェイスから切り替え、独自のJSONオブジェクトを作成することもできます。これを行うには、Content-Typeヘッダーをapplication/jsonに指定し、リクエスト・テンプレートのBodyセクションでRawを選択する必要があります。以下は、上記と同等のクエリーです。

📘

JSONの書式設定は、最初は少し分かりにくいかもしれません

• 文字列である値の場合は、必ず{{ }}を二重引用符で囲みます。
• ブールまたは数値である値の場合は、{{ }}を二重引用符で囲まないでください。
• オブジェクトまたは配列である値の場合は、内側の値をJSON.stringify()で囲みます。

JSON本体を正しく書式設定する際には混乱する可能性があるため、かわりに、本体全体を波括弧で囲んでオブジェクトを動的に作成することもできます。

JSONとして書式設定するのが難しいデータ(つまり、画像または音声ファイル)の場合は、POSTリクエストでAPIを介してこれらを送信することができます。以下にいくつかの例を挙げます。

POSTリクエストによるファイルのアップロード

Retoolでは、現在、ファイルをアップロードする方法が2つ用意されています。フォームを使用する方法と、メタデータなしのバイナリ・ファイルとしてアップロードする方法です。

Form Data本体による方法

リクエスト本体にForm Dataでファイルを添付することで、ファイルをアップロードできます。

以下に、フォーム・データを使用してファイルをアップロードするRESTクエリーの例を示します。

binary本体による方法

バイナリ・データを使用して、クエリー・エディターのリクエスト本体のセクションに手動で入力できないデータ(つまり、画像、音声、動画、またはテキスト・ファイル)を送信できます。

以下に、バイナリをアップロードするRESTクエリーの例を示します。

これらのクエリーをボタンに結び付けることもできます。以下に、ユーザーがアップロード対象のファイルを自分のコンピューターから選択できる、filepickerボタンの設定方法の例を示します。ファイルを選択すると、RESTクエリーuploadFileが実行され、選択したファイルがアップロードされます。filepickerをキャンバスにドラッグしてクリックすると、右側のサイドバーに「After file selected」フィールドが表示されます。そのドロップダウンからアップロード・クエリーを選択します。

SOAP API

SOAP APIリソースを作成する場合は、REST APIリソースのときと同じ方法で作成できます。

RetoolでSOAP APIリクエストを送信するには、次の手順を実行します。

1. SOAPエンドポイントをリクエストのURLとして使用します。Webサービス記述言語(WSDL)を使用している場合は、URL内でWSDLへのパスを指定する必要があります。
2. SOAPエンドポイントはPOSTリクエストに応答するため、リクエスト・メソッドをPOSTに設定します。
3. ヘッダーのContent-Typeをtext/xmlに設定します。
4. 本体で、本体のタイプをRawに変更してから、必要に応じてSOAP Envelope、Header、およびBodyタグを定義します。
5. 必要なヘッダーについては、APIの仕様を確認してください。SOAPメソッドの名前は、通常はSOAP本体で指定しますが、場合によってはヘッダーで指定することもあります。

以下に、RetoolのSOAP APIリクエストの例を示します。

FAQ

Retoolでは単一のRESTクエリーによる何千ものリクエストの送信を処理できますか? その処理が行われている間、フロントエンドには何が表示されますか?

はい、処理できます。queryのクエリー・ステータスでは、{{ query.isFetching }}がtrueであると示されます。{{ query.isFetching === true }}のときには他のコンポーネントを無効にできます。それにより、query1に自動的に依存するコンポーネントについては、デフォルトで、それらに対するロード・インジケーターが1つのみ表示されます。

RetoolではローカルでホストされているAPIにリクエストを送信できますか?

ローカルホスト上で実行されているエンドポイントをpingすることはできません。以下の回避策を試すことができます。

• ngrokにより、ローカルWebサーバーをパブリックURL(https://ngrok.com/) で公開する
• https://localtunnel.github.io/www/

RESTクエリーのレスポンス・ヘッダーにアクセスするにはどうすればよいですか?

レスポンス・ヘッダーに加えて、すべてのレスポンス・メタデータにアクセスできます。Retoolアプリケーション内の任意の場所で{{query.metadata.headers}}を使用するだけです。

クエリーからのエラー・メッセージの一部が曖昧です。詳細情報を入手するにはどうすればよいですか?

当社では、今後数ヶ月間、Retoolのこのような側面の改善に注力いたします。重大な問題が発生した場合は、(mailto:[email protected])( English )までお知らせください。修正した際には必ずご報告いたします。

RetoolではREST APIの認証にJWTトークンを使用できますか?

JWTトークンによる認証については、Retool導入後直ちに使用可能なソリューションはありません。回避策として、(リソースに認証を配置するのではなく)認証にカスタムREST APIリクエストを使用してから、javascript関数を使用してJWTトークンをデコードおよびエンコードするという方法があります。