处理 GraphQL 错误：一个指南-JavaScript中文网-JavaScript教程资源分享门户

处理 GraphQL 错误：一个指南

AI 编程助手，豆包旗下的编程助手，提供智能补全、智能预测、智能问答等能力，节省开发时间，释放脑海中的创造力，支持 VSCode，点击体验 AI

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