Proxyman での GraphQL デバッグ

Proxyman で GraphQL リクエストをデバッグします。クエリ名でルールをマッチさせたり、クエリを整形したり、Query Name 列を表示したり、スクリプトでレスポンスをモックしたりできます。

1. GraphQL リクエストでデバッグツールを使用する

Proxyman 2.27.0 以降では、GraphQL Query Name を指定することで、GraphQL リクエストにもデバッグツールを使用できます。

GraphQL QueryName によるマッチングは、Breakpoint、Map Local、Map Remote、Block List、Allow List、Scripting Tool で使用できます。

使い方

1. デバッグツール（例：Breakpoint）を開きます
2. 新しいルールを作成します
3. Use Wildcard のドロップダウンをクリック → Advanced → GraphQL QueryName にチェックを入れます
4. GraphQL QueryName を入力します

デバッグツールは、まず元のマッチングルールと照合し、その後 GraphQL QueryName と照合します。

備考

ビルド 3.0.0 以降では、デバッグツールのルールを作成すると、Proxyman が GraphQL Query Name を自動的に入力します。

2. GraphQL Prettier

Proxyman 2.33.0 以降では、GraphQL クエリを整形（ビューティファイ）できます。有効にするには、Tools メニュー → Custom Previewer Tab… を開き、GraphQL のチェックボックスをオンにします。

整形された GraphQL クエリ

3. メインテーブルビューに GraphQL Query Name を表示する

Proxyman は、各 GraphQL リクエストの Query Name を抽出して表示できます。列ヘッダーを右クリックし、Query Name 列を有効にしてください。

Query Name 列

Custom Header Column（カスタムヘッダー列）Proxyman のカスタムヘッダー列を使うと、リクエストやレスポンスのヘッダー、クエリパラメータ、JSON ボディの値から列を追加して、似たリクエストを一目で見分けられます。

4. GraphQL リクエストのデバッグ（レガシー - Proxyman 2.26.0 以前）

GraphQL は異なるクエリでも同じ URL を使用するため、URL ベースのデバッグツール（Map Local、Breakpoint、Map Remote など）はうまく機能しません。

ただし、Scripting Tool を使えば、次のことができます。

• QueryName に基づいて、ローカルのレスポンスをマッピングします
• GraphQL リクエストとレスポンスのクエリ、ボディ、ヘッダーを変更します

Scripting Tool で Map Local を使う

Scripting Tool を使うと、ローカルファイルをレスポンスとしてマッピングできます。

1. Proxyman を開きます
2. GraphQL のドメインで Enable SSL Proxying を有効にします
3. ドメインからの HTTPS リクエストが表示されていることを確認します
4. リクエストを右クリック → Tools → Scripting… を選択し、その URL 用のスクリプトを作成します
5. ローカルファイルをインポートするには、More ボタン → Import JSON or Other File... → ファイルを選択します
6. 次のスクリプトは、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();
  
  // Or extract the operationName
  var operationName = request.body.operationName
  
  // 2. Save to sharedState
  sharedState.queryName = queryName
  sharedState.operationName = operationName
  
  // 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;
}

ヘッダー、クエリ、ボディを変更する

1. 同じコードを使用し、queryName を変更します
2. スニペットコード を使って、値を変更します

詳細情報

• GraphQL リクエストのローカルレスポンスをマッピングする方法
• GraphQL リクエストから Query Name を表示する
• Breakpoint ツールで GraphQL リクエストを操作する