Breakpoint 도구로 GraphQL 요청 수정하기
이 짧은 글에서는 Breakpoint 도구로 GraphQL 요청/응답을 수정해 GraphQL 요청의 헤더와 본문을 바꾸는 방법을 보여드립니다.
GraphQL의 문제점
앱이 GraphQL로 백엔드 서버와 통신한다면, 모든 GraphQL 요청 URL이 동일합니다(예: https://<your_server>/graphql).
따라서 본문의 Query Name을 일일이 읽어 보지 않는 한, 어떤 GraphQL 요청인지 구분하기가 정말 어렵습니다.
아래 스크린샷은 Proxyman으로 www.producthunt.com의 앱 트래픽을 캡처한 모습입니다.
👉 팁: Main Table View에 Query Name을 표시하려면 Query Name 컬럼을 추가하세요.
GraphQL 요청에 Breakpoint 사용하기
GraphQL URL이 모두 같기 때문에, Breakpoint가 어떤 GraphQL 요청에 브레이크포인트를 걸어야 할지 판단하지 못할 수 있습니다.
GraphQL 요청에 Breakpoint를 설정하려면 다음 두 가지 방법 중 하나를 사용할 수 있습니다:
1. GraphQL QueryName 수동으로 활성화하기
새 Breakpoint 규칙을 만들 때 Wildcard 드롭다운 → Advanced → GraphQL Query Name을 클릭하면 됩니다.
2. GraphQL Query 자동 추가하기
GraphQL 요청이라면 Proxyman이 GraphQL Query Name을 자동으로 추가합니다. 다음 순서대로 진행하세요:
- Main Table View에서 GraphQL 요청을 우클릭합니다
- Tools → Breakpoint
- GraphQL Query Name이 자동으로 채워집니다.
결과
Breakpoint는 GraphQL 요청에서 기대한 대로 동작합니다. 헤더, URL, 상태 코드, 본문을 포함해 요청/응답 데이터를 수정할 수 있습니다.
GraphQL과 다른 디버깅 도구
Map Local, Breakpoint, Scripting, Block List/Allow List를 비롯한 모든 디버깅 도구는 GraphQL QueryName을 지원합니다.
클라이언트 코드에서 오퍼레이션에 이름을 붙이세요. 이름이 없는 익명 쿼리는 명확하게 매칭되지 않습니다. 테스트해 볼 만한 응답 케이스는 nullable 필드 하나가 있는 일반적인 data 결과, 최상위 errors 배열, 그리고 data와 errors를 함께 담은 부분 응답입니다. 폴링이나 백그라운드 GraphQL 호출이 함께 멈추지 않도록, Breakpoint 규칙은 오퍼레이션 하나로만 제한하세요.
이 짧은 글이 작업을 체계적으로 정리하는 데 도움이 되기를 바랍니다. 즐거운 코딩 되세요! 👨🚀
Proxyman은 고성능 macOS 앱으로, 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기에서 실행되는 앱과 도메인의 HTTP(S) 트래픽을 캡처하고 검사할 수 있게 해 줍니다.
https://proxyman.com/에서 다운로드할 수 있습니다.
