处理 GraphQL 错误:一个指南

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