如何为 GraphQL 请求映射本地响应？

本文将演示如何为 GraphQL 请求映射本地响应。

1. 问题

通常，GraphQL 请求会使用同一个 Endpoint 获取不同的响应。请求 body 中的 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 请求配置本地响应

为 `/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 能做什么，请查阅代码片段。

实用补充

建议使用具名的 GraphQL 操作，例如 query UserProfile，因为它比匿名查询更容易匹配。当前版本的 Proxyman 可以显示操作名，并在支持的工具中使用可识别 GraphQL 的规则。如果保留上面的脚本，请使用变量、别名以及不含操作名的请求分别测试，避免异常的 body 导致脚本中断。另外，请确认本地响应是有效的 JSON，并且与真实 API 的 data 或 errors 结构保持一致。

Proxyman 是一款高性能的 macOS 应用，可帮助开发者抓取 iOS 设备、iOS 模拟器和 Android 设备上的 HTTPS 流量。

下载地址：https://proxyman.com

Noah Tran

2021年1月24日