GraphQL 是一种查询语言，它可以在客户端定义需要获取的数据，并向服务端发起一个 GraphQL 查询请求。相比于传统的 REST API，GraphQL 能够更加精确地获取所需数据，并且能有效地减少网络请求次数，提高页面性能。
在前端开发中，GraphQL 是一个很重要的工具，但是当我们在使用 GraphQL 的时候，有时候会遇到一些错误和异常情况。在本篇文章中，我们将会介绍 GraphQL 错误处理及异常情况排查方法。
错误处理
GraphQL 查询请求可能会因为各种原因失败，比如网络问题、服务端错误等等。当我们向服务端发起一个 GraphQL 查询请求时，可能会遇到以下错误情况：
- 网络请求失败
- 服务端返回错误状态码，比如 404 或 500
- 服务端 GraphQL 解析出错
- 服务端 GraphQL 查询出错
网络请求失败
当我们向服务端发起一个 GraphQL 查询请求时，可能会遇到网络请求失败的情况。如果你使用了像 Apollo Client 这样的 GraphQL 客户端库，你可以在查询请求失败的时候得到一个错误对象，该对象能够告诉你网络请求失败的原因。
--------------------
------ ----
-
---- -
--
----
-
-
-
-------------- -- -
-- ----
-------------- -- -
-- ----
---服务端返回错误状态码
如果服务端返回了错误状态码，比如 404 或 500，那么可以与传统的 REST API 一样，用 try-catch 块处理错误。
--- -
----- ------ - ----- ----------------- -
------- -------
-------- -
--------------- -------------------
--
----- ----------------
------ -
-
---- -
--
----
-
-
-
---
---
-- ------------ -
----- --- -------------- ------- ------- -------------------
-
----- ---- - ----- --------------
-- ----
- ----- ------- -
-- ----
-服务端 GraphQL 解析出错
服务端可能会因为一些原因导致 GraphQL 解析出错，比如输入的查询语句错误、查询的字段不存在等等。当服务端 GraphQL 解析出错时，你可能会得到一个类似于下面的错误信息：
-
--------- -
-
---------- ------- ------ -------- ----- ----- --------
------------ -
-
------- ---
--------- -
-
-
-
-
-这个错误信息告诉我们在查询语句的第 12 行第 1 列有一个语法错误。如果你使用了像 Apollo Client 这样的 GraphQL 客户端库，你可以在捕获错误时，得到一个类似于下面的错误对象：
--- -
----- ------ - ----- --------------------
------ ----
-
---- -
--
---
-
-
-
---
-- ----
- ----- ------- -
--------------------------- -- ------ ------ -------- ----- ----- ------
----------------------------- -- -- ----- -- ------- -- --
-服务端 GraphQL 查询出错
服务端可能会因为一些原因导致 GraphQL 查询出错，比如数据库查询出错、权限不足等等。当服务端 GraphQL 查询出错时，你可能会得到一个类似于下面的错误信息：
-
--------- -
-
---------- -------- ----- -----------
------------- -
------- -----------------------
--
------------ -
-
------- --
--------- -
-
-
-
--
------- -
------- ----
-
-这个错误信息告诉我们服务器返回了一个错误，错误代码为 "INTERNAL_SERVER_ERROR"，位置是在第 1 行第 1 列。同时，我们也能够得到查询的结果，这里的 "user" 是 null。
同样，如果你使用了像 Apollo Client 这样的 GraphQL 客户端库，你可以在捕获错误时，得到一个类似于下面的错误对象：
--- -
----- ------ - ----- --------------------
------ ----
-
---- -
--
----
-
-
-
---
-- ----
- ----- ------- -
--------------------------- -- ------- ------ ------- ----- ---------
----------------------------------- -- ---------------------
----------------------------- -- -- ----- -- ------- -- --
--------------------------------- -- -- -------- -------- ----- ----------- ---------- ------ ----- - ------ - --
-------------------------------- -- ----
-在这个错误对象中，除了错误信息、位置信息之外，还包括了错误的扩展代码、GraphQL 错误对象列表以及网络错误对象。
异常情况排查方法
当我们在使用 GraphQL 开发时，还会遇到一些异常情况。这些异常情况可能与 GraphQL 本身无关，比如前端传递的参数错误、服务端配置不正确等等。在这些情况下，我们需要认真分析异常情况，并尽快解决问题。
1. 检查查询语句
如果你发现在编写 GraphQL 查询语句时，无法获取预期的结果，那么你需要仔细检查查询语句是否正确。比如：
- 是否查询了正确的字段？
- 是否正确传递参数？
- 是否使用了正确的查询操作 ("query" 或 "mutation")？
- 是否正确使用了 GraphQL 的 schema、type 等特性？
如果你使用了像 GraphiQL 这样的 GraphQL IDE，他会在你输入查询语句时提供一些联想和提示，能够帮助你更快地编写正确的查询语句。
2. 检查服务端日志
如果你发现无法获取预期的结果，那么你需要仔细检查服务端日志是否有错误信息。如果服务端日志中有 GraphQL 相关的错误信息，那么可能是服务端出错了。
比如，如果你使用了像 Apollo Server 这样的 GraphQL 服务端，你可以设置 Debug 模式:
----- - ------------ - - ------------------------- ----- ------ - --- -------------- --------- ---------- ------ ----- -- -- ----- -- --- ----------------------- --- -- -- - --------------- ------ ----- -- --------- ---
设置了 Debug 模式之后，服务端会输出比较详细的日志信息，帮助我们更快地找到错误：
------------------------ --------------- ---- - ---------- ----- --------- ----------------- -------- ---- -- -- ----- - ----------- -------- -------- ---- -- -- ----- - ---------- ---------- - - ----- -- ------- - - - ----- - ------------ - ----------- -------- ---- ---------- - ----- --------------------------- -
3. 检查前端日志
如果你发现无法获取预期的结果，那么你需要仔细检查前端日志是否有错误信息，检查一下是否有以下情况：
- 前端请求失败
- 前端获取数据失败
- 前端数据解析失败
如果你使用了像 Sentry 这样的前端日志采集工具，可以在采集到日志之后，查看错误信息并尝试排查错误。
结论
在本篇文章中，我们介绍了 GraphQL 错误处理及异常情况排查方法。在使用 GraphQL 进行前端开发时，我们需要对错误和异常情况有一定的理解，并且需要使用一些工具和技巧来保障我们的开发进度和应用程序的质量。
更多内容请参考：
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6704948dd91dce0dc84f5896