GraphQL 是一种用于 API 的查询语言以及通过运行时提供类型定义的一种服务器端运行时。通常与 GraphQL 一起使用的是客户端库，这些库可以轻松地查询和管理 GraphQL API。而在开发过程中，我们通常需要进行一些网络调试，以了解我们的 GraphQL API 是否返回了正确的数据。本文将介绍如何在 GraphQL 中进行网络调试。
准备工作
在进行调试之前，我们需要准备好以下工具：
- GraphQL 客户端库：在本例中，我们将使用 Apollo Client，它是一个功能强大的 GraphQL 客户端库。
- 浏览器：我们将在浏览器的开发者工具中使用一些功能。
- GraphQL API：我们将使用一个公开的 GraphQL API 来演示我们的调试过程。在本文中，我们将使用 GraphQL Github API。
从 GraphQL API 获取数据
首先，我们需要从 GraphQL API 获取数据。对于本文，我们将使用以下查询来获取 GitHub 上的前端仓库：
-- -------------------- ---- -------
-
------------- ------------ --------------- ----- ----------- ------ -- -
----- -
--- -- ---------- -
-------------
--------------
---
-
-
-
-我们将在 Apollo Client 中创建一个查询对象来获取这些数据：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- --------- - ----
-
------------- ------------ --------------- ----- ----------- ------ -- -
----- -
--- -- ---------- -
-------------
--------------
---
-
-
-
-
--然后，我们可以使用 Apollo Client 发送这个查询：
client.query({
query: GET_REPOS,
})在浏览器中使用 GraphQL 开发者工具来调试
在浏览器中使用 GraphQL 开发者工具可以帮助我们更好地了解 GraphQL 查询的结构和响应数据。要使用该工具，我们需要在浏览器中打开开发者工具，并切换到"Network"选项卡上。然后，我们可以在"Filter"字段中输入关键字"graphql"来快速查找到与 GraphQL 相关的请求。
在找到我们的请求之后，我们可以将该请求打开，并切换到"Preview"选项卡上，以查看该请求的响应。在这里，我们可以看到该请求的响应结果，这将有助于我们判断是否从 API 中获取了正确的数据。
此外，我们还可以在"Headers"选项卡上查看该请求的请求头信息，这将有助于我们确定该请求以及响应是否能够正常通过。
使用 GraphQL Playground 进行更高级的网络调试
除了使用浏览器开发者工具之外，我们还可以使用 GraphQL Playground 来进行更高级的网络调试。GraphQL Playground 是一个功能非常强大的面向 GraphQL API 的调试工具，该工具提供了许多有用的功能，如：查询语法高亮、变量定义、实时查询、可视化查询分析等等。
要使用该工具，我们需要将其安装为一个单独的应用程序或作为浏览器插件。然后，我们可以打开该应用程序或插件，并输入我们的 GraphQL API 地址。
一旦我们输入了我们的 API 地址，该工具将自动获取我们的 GraphQL API 的 schema，并允许我们使用该 schema 来构建我们的查询。
此外，该工具还提供了一些有用的功能来帮助我们更好地了解我们的查询。例如，在右下角的"Docs"选项卡上，我们可以查看我们的 API schema，以了解我们可以使用哪些字段和操作。在左上角的"Variables"选项卡上，我们可以定义使用的变量。在右上角的"Schema"选项卡上，我们可以查看我们的 API schema，以了解我们可以使用哪些字段和操作。
结论
在本文中，我们介绍了如何在 GraphQL 中进行网络调试。我们讨论了使用浏览器开发者工具和 GraphQL Playground 进行调试的不同方法，以及它们可以提供的有用的功能。
通过掌握这些调试技巧，我们可以更轻松地进行前端开发，并确保我们的 GraphQL API 返回了正确的数据。希望这篇文章可以对你的工作有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f100986fbf9601973509a3