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

사용 방법

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

보기 좋게 정리된 GraphQL 쿼리

3. 메인 테이블 뷰에서 GraphQL Query Name 표시하기

Proxyman은 각 GraphQL 요청의 Query Name을 추출해 표시할 수 있습니다. 열 헤더를 마우스 오른쪽 버튼으로 클릭하고 Query Name 열을 활성화하세요.

Query Name 열

Custom Header Column (커스텀 헤더 컬럼)요청 또는 응답 헤더, 쿼리 파라미터, JSON 본문 값으로 Proxyman에 커스텀 컬럼을 추가해 비슷한 요청을 한눈에 구분하세요.

4. GraphQL 요청 디버깅 (레거시 - Proxyman 2.26.0 이하)

GraphQL은 서로 다른 쿼리에도 같은 URL을 사용하므로, URL 기반 디버깅 도구(예: Map Local, Breakpoint, Map Remote)는 GraphQL과 잘 맞지 않습니다.

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

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

Scripting 도구로 Map Local 사용하기

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 요청의 응답으로 로컬 파일을 설정합니다

// 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 요청 수정하기