当使用 GraphQL 时，错误可能会在几种不同的地方发生：服务器端的代码、GraphQL 查询和客户端代码。了解如何处理这些错误是成为前端工程师的必要技能之一。本篇文章将向您介绍如何在前端处理 GraphQL 错误的方法，包括：
- 使用 GraphQL 错误对象
- 处理服务器端错误
- 处理 GraphQL 查询中的错误
- 在客户端显示错误信息
使用 GraphQL 错误对象
在处理 GraphQL 错误时，可以使用 GraphQL 错误对象。这个对象包含了错误的详细信息，包括错误信息字符串、错误代码和错误位置。下面是一个示例 GraphQL 错误对象：
-- -------------------- ---- -------
-
---------- ------- ----- ----- ------- -- ---- -----------
------------ -
-
------- --
--------- -
-
--
------- -
-------
-----
-
-在此示例中，错误的信息描述了在 “User” 类型上查询 “age” 字段是不允许的。locations 数组指示这个错误发生在查询中的第 3 行第 3 列。path 字段描述了错误的对象和字段。
处理服务器端错误
当服务器端发生错误时，服务器将向客户端返回一个错误响应，表示 GraphQL 查询已中止。您可以在客户端捕获这个响应并显示错误消息。以下是一个处理服务器端错误的示例代码：
-- -------------------- ---- -------
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ---------------- ------ -- ----- -- ---
--
--------- -- -----------
--------- -- -
-- ------------ -
-------------------------
---------------- ---- --------
- ---- -
---------------------
-
--
---------- -- -------------------在此示例中，我们向服务器发出 POST 请求，为 GraphQL API 提供了查询字符串 { users }。当服务器响应包含一个 errors 数组时，表示发生了错误。如果发生错误，它们将被记录到控制台，并使用 alert() 函数向用户显示错误消息。
处理 GraphQL 查询中的错误
当在 GraphQL 查询中发生错误时，GraphQL 将返回一个包含错误的数据对象，而不是一个具有有效数据的对象。您可以在客户端捕获这个对象并显示错误消息。以下是一个处理 GraphQL 查询中错误的示例代码：
-- -------------------- ---- -------
------ - -------- - ---- ----------------
------ - --- - ---- -------------
----- --------------- - ----
----- -------- -
----- -
--
----
---
-
-
-
-------- ------- -
----- - -------- ------ ---- - - -------------------------
-- --------- ------ -----------------
-- ------- ------ ----------------------
------ -
----
-------------------- -- -
--- --------------
----------- ------------
-----
---
-----
-
-在此示例中，我们使用 Apollo Client 库的 useQuery 钩子来执行 GraphQL 查询。当查询处于加载状态时，我们向用户显示 Loading... 文本。当查询出现错误时，错误的消息将被渲染并显示给用户。否则，查询的结果将被渲染，并返回包含用户数据的 <li> 列表。
在客户端显示错误信息
当客户端的代码出现错误时，您需要捕获错误并向用户显示错误消息。以下是一个在所有浏览器中处理前端错误的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------- -----------
-------
------
----------- -- -- --------
--------
-------------- - ----------------- ------- ------- ------ ------ -
--------------
--------------------
-
-------- ------------- -
----- --- ---------------- ---- --------
-
--- -
-------------
- ----- ----- -
------------------
-
---------
-------
-------在此示例中，我们将 window.onerror 函数设置为监听前端错误。当发生错误时，错误消息将被弹出，并在控制台中记录错误。我们还在 doSomething() 函数中捕获错误，并在控制台中记录它们。
结论
处理 GraphQL 错误是前端工程师必须掌握的技能之一。在本文中，我们介绍了如何使用 GraphQL 错误对象、处理服务器端错误、处理 GraphQL 查询中的错误以及在客户端显示错误消息。我们希望这个指南能够帮助您更好地处理 GraphQL 错误并提高您的开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671c47109babaf620faffeeb