当使用 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