GraphQL 요청에 로컬 응답 매핑하는 방법?

이 짧은 글에서는 GraphQL 요청에 로컬 응답을 매핑하는 방법을 소개합니다.

1. 문제

일반적으로 GraphQL 요청은 같은 엔드포인트를 사용해 서로 다른 응답을 받습니다. 요청 본문의 Query가 서버에서 조회할 데이터의 종류를 결정합니다. 따라서 Map Local, Breakpoint, Map Remote 등 기존 디버깅 도구는 URL 매칭을 기반으로 하기 때문에 제대로 동작하지 않을 수 있습니다.

2. Scripting 도구가 해결책입니다

특정 GraphQL 요청에 응답을 매핑하려면 Scripting 도구를 사용하는 것을 강력히 권장합니다.

Scripting 도구를 사용하면 개발자가 JavaScript로 HTTP 요청과 응답을 유연하게 조작할 수 있습니다. JavaScript 코드로 Breakpoint, Map Local, Map Remote 등과 같은 작업을 스크립트로 똑같이 구현할 수 있다고 상상해 보세요 👀

Scripting 도구를 사용하면 다음을 쉽게 구현할 수 있습니다:

QueryName에 따라 응답을 Map Local 처리
GraphQL 요청과 응답의 query, body, header 조작

Scripting 도구가 처음이라면 문서, 애드온, 스니펫 코드를 확인해 보세요.

3. GraphQL 요청에 Map Local 응답 적용하기

`/user` Query에 대한 응답 매핑하기

Proxyman 앱을 열고 GraphQL 도메인에 대해 SSL Proxying을 활성화합니다
해당 도메인에서 보내는 HTTPS 요청이 보이는지 확인합니다
요청 항목을 우클릭하고 -> Tool -> Scripting을 선택해, 해당 URL로 스크립트를 만듭니다
로컬 파일을 가져오려면 More 버튼 -> Import JSON or Other files -> 파일 선택 순서로 클릭합니다
다음 스크립트는 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();

	// 2. Save to sharedState
	sharedState.queryName = queryName

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

결과적으로 Query가 user인 모든 GraphQL 요청은 정의한 로컬 응답을 반환합니다.

4. 다음 단계

Scripting으로 무엇을 할 수 있는지 궁금하다면 스니펫 코드를 확인해 보세요.

도움이 되는 업데이트

query UserProfile처럼 이름이 있는 GraphQL 오퍼레이션을 사용하는 것이 좋습니다. 이름이 없는 익명 쿼리보다 매칭하기 쉽기 때문입니다. 최신 Proxyman 버전에서는 오퍼레이션 이름을 표시하고, 지원되는 도구에서 GraphQL을 인식하는 규칙을 사용할 수 있습니다. 위의 스크립트를 그대로 사용한다면, 예상하지 못한 본문 때문에 스크립트가 멈추지 않도록 variables, alias, 오퍼레이션 이름이 없는 요청으로 테스트하세요. 또한 로컬 응답이 올바른 JSON이며, 실제 API와 같은 data 또는 errors 구조를 따르는지 확인하세요.

Proxyman은 개발자가 iOS 기기, iOS 시뮬레이터, Android 기기에서 HTTPS 트래픽을 캡처할 수 있게 해 주는 고성능 macOS 앱입니다.

다음에서 받을 수 있습니다: https://proxyman.com

Noah Tran

2021년 1월 24일