# Proxyman での GraphQL デバッグ

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

## 1. GraphQL リクエストでデバッグツールを使用する {#1-use-debugging-tools-with-graphql-requests}

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

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

### 使い方 {#how-to-use}

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

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

![Use Wildcard > Advanced > GraphQL QueryName にチェックが入った Proxyman の Breakpoint ルールエディタ](https://proxyman.com/docs/assets/Screen_Shot_2021-05-26_at_15_46_13.png)

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

## 2. GraphQL Prettier {#2-graphql-prettier}

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

![リクエストパネルの GraphQL タブに、整形された GetUser クエリと GraphQL 変数が表示された Proxyman](https://proxyman.com/docs/assets/proxyman-graphql-query-prettier.jpg)

_整形された GraphQL クエリ_

## 3. メインテーブルビューに GraphQL Query Name を表示する {#3-show-graphql-query-name-on-the-main-table-view}

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

![GetUser、ListPosts、CreatePost を表示する Query Name 列と、その隣の Comment 列があるメインテーブルの Proxyman](https://proxyman.com/docs/assets/proxyman-graphql-query-name-column.jpg)

_Query Name 列_

- [Custom Header Column（カスタムヘッダー列）](https://proxyman.com/docs/ja/basic-features/custom-header-column)

## 4. GraphQL リクエストのデバッグ（レガシー - Proxyman 2.26.0 以前） {#4-debug-graphql-requests-legacy---proxyman-2260-and-below}

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

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

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

### Scripting Tool で Map Local を使う {#map-local-with-the-scripting-tool}

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 リクエストに対して、ローカルファイルをレスポンスとして設定します

```javascript
// 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;
}
```

### ヘッダー、クエリ、ボディを変更する {#manipulate-headers-query-body}

1. 同じコードを使用し、queryName を変更します
2. [スニペットコード](https://proxyman.com/docs/ja/scripting/snippet-code#2-common-on-request-and-response) を使って、値を変更します

## 詳細情報 {#learn-more}

* [GraphQL リクエストのローカルレスポンスをマッピングする方法](https://proxyman.com/posts/2021-01-24-How-To-Map_Response_For_GraphQL_Requests)
* [GraphQL リクエストから Query Name を表示する](https://proxyman.com/posts/2021-03-28-Display-QueryName-From_GraphQL-Request)
* [Breakpoint ツールで GraphQL リクエストを操作する](https://proxyman.com/posts/2023-03-16-GraphQL-Request-With-Breakpoint)