GraphQL リクエストにローカルのレスポンスを返す方法

この短い記事では、GraphQL リクエストに対してローカルのレスポンスを返す方法を紹介します。

1. 課題

一般に、GraphQL のリクエストは同じエンドポイントを使い、異なるレスポンスを受け取ります。サーバーがどのデータを取得するかは、リクエストボディの Query によって決まります。そのため、Map Local、Breakpoint、Map Remote などの既存のデバッグツールは、URL マッチングを使うため、うまく機能しない場合があります。

2. Scripting Tool が解決策になる

特定の GraphQL リクエストにレスポンスを返すには、Scripting Tool の利用を強くおすすめします。

Scripting Tool を使うと、JavaScript で HTTP のリクエストとレスポンスを柔軟に操作できます。JavaScript を使えば、Breakpoint、Map Local、Map Remote などと同じことをスクリプトで実現できます 👀

Scripting Tool を使うと、次のことを簡単に実現できます。

QueryName に応じたレスポンスを Map Local で返す
GraphQL のリクエストとレスポンスの Query、Body、Header を操作する

Scripting Tool を初めて使う場合は、ドキュメント、アドオン、スニペットコードをご覧ください。

3. GraphQL リクエストで Map Local のレスポンスを返す

`/user` クエリのレスポンスをマップする

Proxyman を開き、GraphQL のドメインで SSL Proxying を有効にします。
ドメインの HTTPS リクエストが表示されていることを確認します。
フローを右クリックして Tool -> Scripting を選択し、対象の URL でスクリプトを作成します。
ローカルファイルをインポートするには、More ボタン -> Import JSON or Other files の順にクリックして、ファイルを選択します。
次のスクリプトは、QueryName="user" の GraphQL リクエストに、ローカルファイルを設定する方法を示しています。

// Import file from More Button -> Import JSON or Other files 
const file = require("@users/B02D96D5.default_message_32E64A5B.json");

function onRequest(context, url, request) {

	// 1. Extract the queryName from the request
	var queryName = request.body.query.match(/\S+/gi)[1].split('(').shift();

	// 2. Save to sharedState
	sharedState.queryName = queryName

	// Done
	return request;
}

function onResponse(context, url, request, response) {

	// 3. Check if it's the request we need to map
	if (sharedState.queryName == "user") {

	// 4. Import the local file by Action Button -> Import
	// Get the local JSON file and set it as a body (like Map Local)
	response.headers["Content-Type"] = "application/json";
	response.body = file;
	}

	// Done
	return response;
}

この設定により、Query が user の GraphQL リクエストはすべて、定義したローカルのレスポンスを返します。

4. 次のステップ

Scripting でできることが気になる場合は、スニペットコードをご覧ください。

役立つ補足

query UserProfile のように名前付きの GraphQL オペレーションを使うことをおすすめします。名前のない（無名の）クエリより照合しやすいためです。最新の Proxyman では、オペレーション名を表示したり、対応しているツールで GraphQL を認識したルールを使ったりできます。上記のスクリプトをそのまま使う場合は、変数、エイリアス、オペレーション名のないリクエストでテストしてください。想定外のボディでスクリプトが止まらないか確認するためです。また、ローカルのレスポンスが有効な JSON であり、実際の API と同じ data または errors の構造に従っていることも確認してください。

Proxyman は、iOS デバイス、iOS シミュレータ、Android デバイスの HTTPS 通信をキャプチャできる、高性能な macOS アプリです。

https://proxyman.com からダウンロードできます。

Noah Tran

2021年1月24日