Breakpoint ツールで GraphQL リクエストを編集する
この記事では、Breakpoint ツールを使って GraphQL のリクエスト/レスポンスを編集し、リクエストのヘッダーとボディを変更する方法を紹介します。
GraphQL の問題点
アプリがバックエンドサーバーとの通信に GraphQL を使っている場合、すべての GraphQL リクエストの URL は同じになります。例：https://<your_server>/graphql
そのため、ボディの中のクエリ名を読まない限り、どの GraphQL リクエストがどの処理を行っているのかを判別するのは非常に難しいです。
次のスクリーンショットは、Proxyman で www.producthunt.com のアプリの通信をキャプチャした際のものです。
👉 ヒント： Main Table View に Query Name 列を追加すると、メインのテーブルにクエリ名を表示できます。
GraphQL リクエストで Breakpoint を使う
GraphQL の URL はすべて同じなので、Breakpoint だけでは、どの GraphQL リクエストに Breakpoint を設定すべきかを判断できない場合があります。
GraphQL リクエストに Breakpoint を設定するには、次のいずれかの方法があります。
1. GraphQL QueryName を手動で有効にする
新しい Breakpoint ルールを作成するときに、Wildcard Dropdown -> Advanced -> GraphQL Query Name の順にクリックします。
2. GraphQL クエリを自動で追加する
GraphQL リクエストの場合、Proxyman は GraphQL Query Name を自動的に追加します。手順は次のとおりです。
- Main Table View で GraphQL リクエストを右クリックします
- Tools -> Breakpoint を選択します
- GraphQL Query Name が自動で入力されます。
結果
Breakpoint は GraphQL リクエストに対して期待どおりに動作します。ヘッダー、URL、ステータスコード、ボディを含め、リクエスト/レスポンスのデータを変更できます。
ほかのデバッグツールと GraphQL
Map Local、Breakpoint、Scripting、Block/Allow List を含むすべてのデバッグツールは、GraphQL QueryName での指定に対応しています。
クライアントコードで操作に名前を付けてください。名前のない（匿名の）クエリは、明確にマッチさせることができません。レスポンスのテストに役立つケースは、1つの null 許容フィールドを含む通常の data 結果、トップレベルの errors 配列、そして data と errors の両方を含む部分的なレスポンスです。ポーリングやバックグラウンドの GraphQL 呼び出しで Breakpoint が止まらないよう、Breakpoint ルールは1つの操作に限定してください。
この記事が、開発の整理に役立てば幸いです。楽しいコーディングを！ 👨🚀
Proxyman は、iOS デバイス、iOS シミュレータ、Android デバイス上のアプリやドメインの HTTP(S) 通信をキャプチャして検査できる、高性能な macOS アプリです。
入手はこちら：https://proxyman.com/
