在开发前端应用时，GraphQL 是一个非常强大的工具。但是当你在编写GraphQL查询时，难免会遇到错误。这些错误可能会导致您无法发送正确的请求，从而影响您的应用。下面我将详细介绍如何使用GraphQL Playground和Chrome Developer Tools来debug GraphQL query中的错误，并提供一些实用的纠错技巧。
GraphQL Playground
GraphQL Playground 是一个值得信赖的工具，用于测试和debug GraphQL API。它支持在同一页面上执行查询和变异，以及查看GraphQL的schema、文档和API缩写等信息。
1. 检查语法错误
如果您的查询包含语法错误，您将无法获取预期的结果。因此，您可以首先使用GraphQL Playground的像素完美编辑器检查语法错误。
举个例子，我们可以检查下面这个GraphQL查询的语法是否正确：
query getUsers {
allUsers {
username
firstName
}如果我们忘记在语句末尾加上“}”，将会得到一个错误的响应。在GraphQL Playground下，语法错误会有红色弹窗提示。
2. 查找响应中的错误信息
如果查询语法正确，但是还是无法获取预期的结果，那么你可能需要检查响应中的错误信息。
在GraphQL Playground中，你可以查看响应中的错误信息和错误字段：
-- -------------------- ---- -------
-
------- -----
--------- -
-
---------- ------- ----- ----- ------------- -- ---- -----------
------------ -
-
------- --
--------- -
-
-
-
-
-在上面的响应中，我们可以清楚地看到错误消息，它告诉我们我们不能在“User”类型上查询“usersname”字段。我们还可以看到这个错误发生在查询中的第3行第3列。
通过分析这些错误信息，我们可以更快地找到问题并debug。
Chrome Developer Tools
除了GraphQL Playground外，Chrome Developer Tools也有一些有用的技术可以帮助debug GraphQL 。
1. 查看请求和响应
我们可以使用Chrome Developer Tools的“Network”面板来查看GraphQL请求和响应信息。首先，我们需要开始一个新的开发人员会话。
在“Network”面板中，我们可以看到与GraphQL API相关的所有请求和响应。特别是在查看响应中，我们可以看到任何错误信息，包括“errors”数组中的任何信息。我们甚至可以看到包含相应JSON数据的整个请求和响应的详细信息。
2. 设置断点
在Chrome Developer Tools的“Sources”面板中，我们可以使用断点调试GraphQL。具体而言，我们可以在GraphQL查询的JavaScript代码中设置一个断点，以便更好地debug错误。
通过设置断点，在GraphQL查询中的代码成功运行之前，我们可以查看JavaScript中的变量值，以便我们更好地了解代码中的问题。
下面的代码片段是一个演示如何在GraphQL查询中设置断点的例子：
query {
allUsers {
id
username
firstName
}
}这将在附加到一个调试器之后执行查询。我们可以设置断点来检查运行中的问题，就像在其他JavaScript调试器中一样。
总结
在本文中，我们介绍了两种常用的debug GraphQL查询的工具——GraphQL Playground和Chrome Developer Tools。我们可以使用这些工具来检查语法错误、查找响应中的错误信息、查看GraphQL的请求和响应，并设置断点debug。
当我们开发前端应用时，debug GraphQL是非常重要的。通过使用GraphQL Playground和Chrome Developer Tools中的技术，我们可以更快地找到并解决GraphQL中的错误，提高我们的工作效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64aaaf9948841e98946c17bc