Zenn
🙆

Postman Flows FQL その２ APIからのJSON Responseを操作する (by Cloudflare Workers)

2025/03/03に公開
Postman
tech

前回の記事ではPostman Flowsを用いたFlows Query Language (FQL) によるJSONデータの処理を行いました。
https://qiita.com/KameMan/items/e4e6eb24f8c690145ec8

JSONデータはRecordブロックを使って流し込んだため、本来の用途ではなくあくまでテスト目的です。Postman Flows はAPI駆動のワークフローエンジンであるため、APIコールの結果レスポンスとして戻ったJSONボディを受け取り次の処理に進めることが想定された利用目的です。

このため、今日はテスト用APIをCloudflare Workers を用いて構築します。

Cloudflare Workers の準備

Cloudflare Workers はCloudflareが提供するサーバレスなエッジコンピューティングサービスです。Javascript / Typescriptを活用して様々な処理を実装できます。AWS Lambda と異なり、軽量であること、デフォルトでHTTPエンドポイントが存在しておりブラウザからのテストが簡単であること、永続性ストレージサービスが備わっていること、などがあげられます。
https://zenn.dev/kameoncloud/articles/1fac9762aab4ec
等を参考に簡単なHello Worldを構築します。
その後Workerのスクリプトを以下に置換してDeployします。

addEventListener('fetch', event => {
	event.respondWith(handleRequest(event.request))
  })
  
  async function handleRequest(request) {
	const data = {
	  message: 'Hello, world!',
	  timestamp: new Date().toISOString()
	}
	return new Response(JSON.stringify(data), {
	  headers: { 'Content-Type': 'application/json' }
	})
  }

ブラウザでアクセスすると以下のJSONが戻ります。

{"message":"Hello, world!","timestamp":"2024-08-07T06:37:04.815Z"}

Postman Collection の設定

Postman Flowsで設定可能なAPIコールはあらかじめPostman Collectionとして登録されている必要があります。
コレクションから新規ボタンをクリックします。
image.png
HTTPを選択します。
image.png
WorkerのURLを入力して送信ボタンを押します。
image.png
ResponseのJSON Body を正しく受信していることがわかります。
image.png
保存ボタンを押してこのAPIコールを保存します。
image.png
適当な名前でSaveします。
image.png
次にフローの画面で新規ボタンを押します。
image.png
次はフローを選びます。
image.png
Send a requestをクリックします。
image.png
先ほど作成されたコレクションを選択します。
image.png
Runボタンをクリックすると値が戻ってきます。
image.png

Evaluate ブロックの接続

これで前回の記事で触れたRecordブロックと同じ枠割を果たすAPIコールが作成できましたのでEvaluateブロックを接続し、bodyを選択します。
image.png
FQLでvalue1と入力すると正しくAPIコールで戻ったJSON ResponseをEvaluate ブロックが受け取っていることがわかります。
image.png
value1.messageと入力するとmessage要素だけを抜き出してくれます。
image.png
この値はResultとして出力されますのでさらに次のAPIコールやブロックに渡すことが可能です。

変数の操作

例えば以下のような２つ目のAPIコールを作成した場合
image.png
image.png

value1がEvaluateブロックのResultとつながってくれません。これは受け取り側のvalue1がString型(Aa)となっているためです。Select型にすると受け取ることができます。
image.png

もう一つ方法があり、変数を使う方法です。その場合、変数を作成し一度変数にその値を格納する必要があります。
まずは２つ目のAPIをhttps://requestcatcher.com/という神サイトで作っておきます。
そして以下のようなコレクションを作成し保存しておきます。
image.png
この時点ではmessage変数を認識していません。ここで 環境 の出番です。
image.png
image.png
シンプルにmessageという変数を作成して保存しておきます。
image.png
新しい環境という場所に変数が保存されたことに注目してください。
image.png
次にコレクションの画面に戻り、新しい環境を選択します。
image.png
messageという変数を正しく認識しています。
image.png
EvaluateブロックのResultと2つめのAPIコールのmessageがくっつきました！
RequestCatcherの画面では値が正しくPOSTされたことがわかります。

GET /?message=Hello%20World%20! HTTP/1.1
Host: postmanflow.requestcatcher.com
Accept: */*
Accept-Encoding: gzip, deflate, br
Cache-Control: no-cache
Connection: keep-alive
Postman-Token: 0e8a65e1-b751-43d0-ad98-c7681623b3a4
User-Agent: PostmanRuntime/7.39.0

Discussion