# 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 도구에서 작동합니다.

### 사용 방법 {#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부터 Proxyman은 GraphQL 쿼리를 보기 좋게 정리(prettify)할 수 있습니다. 이 기능을 켜려면 **Tools** 메뉴 -> **Custom Previewer Tab…**을 열고 **GraphQL** 체크박스를 체크하세요.

![GetUser 쿼리와 GraphQL 변수가 보기 좋게 정리되어 표시된 Request 패널의 Proxyman GraphQL 탭](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/ko/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)는 GraphQL과 잘 맞지 않습니다.

하지만 Scripting 도구를 사용하면 다음을 할 수 있습니다:

* QueryName을 기준으로 로컬 응답을 매핑합니다
* GraphQL 요청과 응답의 쿼리, 본문, 헤더를 변경합니다

### Scripting 도구로 Map Local 사용하기 {#map-local-with-the-scripting-tool}

Scripting 도구를 사용해 로컬 파일을 응답으로 매핑할 수 있습니다:

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/ko/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)