GraphQL通过API获取数据时解决了很多问题。
通常情况下，前端开发者们通常需要等待后端团队更新API接口。这在模拟GraphQL请求时非常有用，非常有用。
今天，我们将看看Requestly（以下简称Requestly）如何减少对后端开发人员的依赖来帮助您实现这一点。
我们快点开始吧。
zh: zh: zh: zh: zh: * （此处省略了部分内容）<sup>1</sup>
<sup>1</sup> 注：此处为省略内容的占位符。
简单来说，我们会详细聊一聊这些主题。
- 没有可用的API时，通常的工作流程是怎样的？
- 如何用Requestly模拟GraphQL API的效果？
- 更多关于Requestly能为您做些什么的简要介绍。
1. 没有 API 可用时，一般会怎样操作呢？
在大多数情况下，要实现不包含API逻辑的前端，很难找到一种有效的方法。
通常，当 API 还没准备好时，前端开发人员会依赖硬编码的回复。
这些协议以JSON格式详细描述了预期的请求和响应格式。
这样做让他们可以继续UI开发。这种移除和重新集成硬编码响应的来回可能导致代码混乱，并且非常耗时费力。
我在之前的某一篇文章中详细讲过这个问题。你可以在我下面附的文章开头读到相关内容。
## 如何10倍快构建前端应用 Anmol Baranwal 在 Requestly · 5日9月 #opensource #javascript #前端开发 #web开发技术
✅ 避免硬编码响应，开发人员可以使用模拟 API 的响应来实现这一目标，这提供了一种简单的解决方案。这使得测试更加灵活，并减少了反复修改代码的必要。
下一节咱们来看看怎么解决这个问题。
2. Requestly是如何解决这些问题的，包括一些用例。
如果你曾经开发过网站的话，就会知道每个应用都得向服务器请求资源。
它可以是 API 请求、脚本或其他任何东西，以在网页上显示。
Requestly 是一个开源的前端开发工具，能帮助你更快地测试和调试应用，无需多次部署。它还能：
- 更快地测试和调试你的应用程序
- 简化开发流程
- 减少开发时间
如果后端 API 还没有准备好，我们就可以先开始构建功能了。
在生产环境中直接测试代码更改，而不需要经过部署周期。
✅ 测试、验证 API 响应和等等更多。
🎯 你怎样才能装上Requestly插件呢？
您可以在这里下载桌面应用，或在您常用的浏览器中查找，例如Chrome、Safari和Brave。
桌面版
还有许多其他用例，比如，Requestly 可以帮助避免不小心提交模拟代码的意外情况。但我将探讨一个具体的用例，说明我们可以如何用它来更新生产环境中 GraphQL API 的响应。
Requestly 是一个开源项目，在 GitHub 上获得了 2.3千 star。
让我们看看如何使用Requestly响应规则来更改HTTP请求的响应内容，而不实际修改服务器上的内容。
我们先创建一个新规则，来改一下HTTP请求的响应内容。
新建规则项
我们将仅修改响应规则。
（请点击选择合适的API响应选项）
选择API响应
你也可以选择多种模板，如果你想快速上手。
这里有各种模板供你选择
你也可以点击帮助，获取更多启动资源。
什么是GraphQL API，它们和REST API有哪些不同？
在尝试学习如何模拟这些东西之前，我们先来了解一下GraphQL APIs到底是什么。
GraphQL 是一种用于 API 的查询语言，它提供了你 API 中数据的清晰描述，让客户端能够只请求他们真正需要的数据。
GraphQL API 使用一个端点来处理所有对后端的请求，而 REST API 则为不同的资源有不同的端点。
通常API接口存在的问题是：
-→ Underfetching ：我们一次可能需要多个实体，在这种情况下，每个请求都可能无法获取我们真正需要的“数据”。
-→ 过度拉取 : 这是指你获取了太多的数据，其中有些数据你并没有用到。
更多信息请参阅这个stackoverflow问题 - 过抓取与欠抓取是什么意思？
比如说，这可以是一个例子。
POST /graphql
{
"operationName": "getUsers",
"query": `
query getUsers {
users {
id
email
}
}
`
}
点击进入全屏模式 点击退出全屏模式
当发送此请求后，服务器会响应一个包含每个用户 id 和 email 的用户列表。一个示例响应可以是这样的，例如：
{
"数据集": {
"用户信息": [
{ "id": "1", "email": "user1@example.com" },
{ "id": "2", "email": "user2@example.com" }
]
}
}全屏模式 退出全屏
这种查询方式更高效，因为它只检索我们所需的特定字段。
实际上内部依然是老样子的HTTP
-→ 获取请求：
如果通过 GET 请求发送 GraphQL，则 GraphQL 查询将作为查询参数传递给端点。
示例网址：http://domain.com/graphql_endpoint?query={hero{name}}
发送 POST 请求：
在 POST 请求中，查询参数、变量甚至是 operationName 都作为请求体的内容传递。
无论使用什么方法，响应总是采用相同的格式，服务器如常返回一个JSON格式的数据。
你可以观看 Fireship 的这个视频，在 100 秒内快速了解 GraphQL API。
🎯 使用 Medium GraphQL API 端点的示例
正如我之前说过的，GraphQL API 使用一个单一的端点来执行所有查询，而 REST API 却不是这样。
所以针对GraphQL中的特定查询，你需要基于操作或查询进行过滤。Requestly 让你可以根据操作或查询来过滤API调用。让我们来看看如何实现这个功能。
我们将通过基于GraphQL的Medium API端点，用两个不同的示例来探索在GraphQL规则中使用GraphQL的选项。
GraphQL API 接口在 Medium 网络的日志中
你可以查看许多请求的数据。
这是一些抓取的请求
负责的API端点是：medium.com/_/graphql。
-→ 🎯 右侧栏标签。
你知道，他们在侧边栏加上了推荐标签，所以我们找一下相关的payload操作。
在 GraphQL 中，术语 payload operation 通常指在 GraphQL 请求过程中发送或接收的数据结构。这包括实际查询或变异的数据内容，以及处理请求所需的其他任何元数据。
您也可以在 Requestly 网络检查器中找到所有信息，包括 operation 名称和 graphQL API URL（图数据查询语言的 API 地址）。
这是当所有值都为空时的仪表板样子。
如下图所示：
✅ 解释一下。
-→ Request: 这将包含主要的 API 端点网址，并且会使用像 contains 和 equal 这样的选项。
-→ Key：键是指请求负载中的 JSON 键值。它还支持嵌套路径。例如，如果操作名称位于路径中 data.operationName 而不是根路径，则您可以将键指定为 data.operationName。如果请求体以数组开头，如 [{ "operationName": "value", ...}]，则可以将键指定为 0.operationName，这里的 0 表示数组的第一个元素。
-→ operationName: 它是你的操作的一个有意义且明确的名称。仅在包含多个操作的文档中才需要，但使用它是被推荐的，因为在调试和服务器端日志记录方面非常有用。
-→ 响应状态: 这将是一个与响应一起发送的状态代码，有助于您识别日志。您可以选择状态代码如 3xx，4xx，5xx 等，根据您的具体情况，还可以选择其他状态代码。
-→ Response：我们可以使用静态响应或动态请求来添加自定义逻辑，通过编写代码实现。在需要处理长时间的API调用或同时处理多个请求的情况下，使用Async/Await效率更高。真的非常有用
让我们用必要的值来设置一个规则。重要的是要使用和payload快照中高亮显示的相同值RightSidebarQuery。
0.operationName 也依赖于之前的快照（网络日志记录）中的 Payload 数据结构。我们采用 Equals 过滤选项来使我们的规则更加严格。
这是一张图片，展示的是…
修改包含前两个标签的 JSON 响应内容。
你可以从这个GitHub上的gist复制这段回复。
输出：这就完了。
如你所见，页面上会弹出一条消息，提示规则已经生效了。
标签（tag）根据JSON响应中的内容进行相应的修改。
-→ 🎯 推荐的帖子。
你可以在下面的网络日志记录中看到这个负载操作。
类似于填充侧边栏中的标签，我们也可以为这个规则填上必要的值。
你可以从这里复制这段内容，链接是 gist on GitHub。
如你所见，我已经更新了标题和副标题的 JSON 数据来验证输出结果。
它按规矩好好运转着！
看起来一切正常。
也有一个选项是如果不调用服务器，requestly会直接返回响应，这样的话，它不会出现在网络日志中。
这是一张图片的链接。
更多关于如何模拟测试GraphQL API响应的信息，你可以查阅文档和官方博客。
或者，看看这个视频！
3. 你可以用 Requestly 实现更多目标。
还可以做很多事情，比如：
-→ 在 staging/生产测试环境中直接测试脚本或 API，通过将一个环境中的 HTTP 请求（如 API 调用）重定向至另一个环境。
-→ 修改头部，注入自定义脚本或样式到外部网站上的页面。
-→ 拦截并修改 GraphQL 查询（一种数据查询和操作语言），同时通过针对操作名称和查询数据进行额外处理来模拟伪造。
这非常有用，无论是对于质量保证工程师还是前端开发团队。我们现在来看看一些超酷的功能。
✅ 您还可以使用Requestly的API客户端进行API的开发和测试。甚至可以绕过CORS限制，它在app.requestly.io/api-client可用。
API客户端的空白仪表板
✅ 你只需单击一下即可查看你的 HTTPs 请求和响应的纯文本。许多高级过滤器，如 Content-Type、StatusCode 和 Method，用于精确搜索你需要的内容。你还可以创建整个流程的模拟。
✅ 您可以将规则和模拟数据导出或导入 JSON 格式。
步骤：导入规则
你可以分享任何规则的内容，还可以选择下载它。
✅ 你可以创建一个工作区来共享规则、模拟数据和会话记录。这能帮助团队更快地解决问题。
一起来吧！
✅ 您可以录下会话，每次在仪表板测试规则的时候，系统都会自动完成录制。
✅ 你可以从仪表板开启或关闭功能。
✅ 您可以查阅此文档，了解它们与这些工具如Charles Proxy、Fiddler、Resource Override、ModHeader、HTTP Toolkit、Proxyman、Wireshark、Mockoon、BirdEatsBug和Jam相比的表现。
（这张图片展示了某种对比。）
你可以遵循快速入门指南，并阅读使用指南，这将解答你大多数的问题。
我强烈推荐观看这个快速入门演示，以便开始使用Requestly。
接下来的文章中，我们将讨论如何记录HTTP数据并为整个过程创建模拟数据。敬请关注！
可以说，Requestly 提供伪造 GraphQL API 的响应的最简单方法。
已经有超过250,000名前端开发者在使用Requestly，这让它显得非常可靠。
如果有任何问题或反馈，请告诉我。
祝你今天过得愉快，下次再聊！
| 如果你喜欢这样的内容， 请继续关注我，更多精彩内容等着你 :)\ |
   |
|---|
关注 Requestly 获取更多这类内容。
一个开源的浏览器HTTP拦截工具 (https://dev.to/requestly)
共同学习，写下你的评论
评论加载中...
作者其他优质文章
