GraphQL 的错误处理方式简介

面试官:小伙子,你的数组去重方式惊艳到我了

GraphQL 是一种针对 API 的查询语言和运行时环境,用于通过一个统一的端点来查询、修改和订阅数据。与 REST API 相比,GraphQL 具有更高的灵活性和可定制性。但是,当我们在使用 GraphQL 进行数据查询时,经常会遇到一些错误。本文将介绍 GraphQL 中的错误处理方式以及如何在应用程序中处理这些错误。

错误处理方式

常见错误类型

GraphQL 中的错误类型通常包括以下几种:

  • 语法错误:查询语句无法解析或解释。
  • 运行时错误:在查询中执行过程中发生的错误,例如访问未定义的对象或试图除以零。
  • 校验错误:查询违反了 Schema 中的定义,例如查询了不存在的字段或类型不匹配。

GraphQL 错误响应

处理错误的第一步是了解 GraphQL 如何响应错误。当出现错误时,GraphQL 将返回带有 errors 字段的 JSON 响应。该字段是一个包含错误信息的数组,每个错误对象包含以下字段:

  • message:错误消息,为字符串类型;
  • locations(可选):该错误发生的位置数组,每个项包含行号和列号信息;
  • path(可选):导致错误的查询字段路径。

以下是一个示例错误响应:

-
  --------- -
    -
      ---------- ----- --- --------
      ------------ -
        -
          ------- --
          --------- -
        -
      --
      ------- -
        -----------
        ------
      -
    -
  -
-

GraphQL 错误处理

前端应用程序中的错误处理需要对 GraphQL 返回的错误响应进行解析和处理。我们可以在 GraphQL 客户端中使用错误处理器(error handler)来处理该响应。

错误处理器可用于捕获 GraphQL 客户端中的错误,并在出现错误时执行相应的操作。例如,可以使用错误处理器在页面上显示错误消息,或将错误消息发送到错误日志。

以下是一个简单的错误处理器示例:

----- --------------------- - ---------- -- -
  -- ----------------- -
    ----------------------------- -- -
      -----------------------------
    ---
  - ---- -
    ---------------------------
  -
-

错误处理指南

以下是一些处理 GraphQL 错误的最佳实践:

定义自定义错误类型

自定义错误类型可以让我们更清晰地区分不同类型的错误。例如,我们可以使用自定义错误类型来表示身份验证错误、数据库错误、输入验证错误等。

----- ------------------- ------- ----- -
  ------------- -
    --------------------- --------
    --------- - ----------------------
  -
-

----- ------------- ------- ----- -
  ------------- -
    --------------- --------
    --------- - ----------------
  -
-

----- -------------------- ------- ----- -
  ------------- -
    ------------ ---------- --------
    --------- - -----------------------
  -
-

处理错误堆栈

当我们从后端收到 GraphQL 错误响应时,错误堆栈可能会被截断。在我们的代码中,我们可以尝试解组错误对象,以便更清楚地了解错误发生的位置。

----- --------------------- - ---------- -- -
  -- ----------------- -
    ----------------------------- -- -
      -----------------------------
      -- ----------------- -
        ----------------- ----------------------------------------------------------
      -
    ---
  - ---- -
    ---------------------------
  -
-

忽略无用的错误

当我们提交查询时,我们有时会得到一些不重要或无用的错误。这些错误可能由某些查询参数或接口版本造成,而不是我们实际写的查询本身。

在这种情况下,我们可以尝试忽略这些错误,只处理重要的错误。例如,我们可以使用正则表达式来过滤掉某些错误消息。

----- -------------- - -
  --------- ----------
  ------ ----------
--

----- --------------------- - ---------- -- -
  -- ----------------- -
    ----------------------------- -- -
      -- ------------------------ -- ------------------------ -
        -----------------------------
      -
    ---
  - ---- -
    ---------------------------
  -
-

示例代码

以下是一个使用 JavaScript 和 React 的 GraphQL 查询示例。该应用程序演示了如何从 GraphQL 响应中提取数据和错误,并将错误消息显示在页面上。

------ ------ - -------- - ---- --------
------ - ---- -------- - ---- -----------------

----- ---------- - ----
  ----- -------------- ---- -
    ------------ ---- -
      --
      ----
      -----
    -
  -
--

----- ---- - -- -- -- -- -
  ----- - -------- ------ ---- - - -------------------- -
    ---------- - -- --
  ---
  ----- -------------- ---------------- - ---------------

  -- --------- ------ ------------------
  -- ------- -
    -----------------------------
    -------------------------------
    ------ -----
  -

  ------ -
    -----
      ------------- -- ----------------------
      -------- ------------------------
      --------- -------------------------
    ------
  --
--

------ ------- -----

以上代码使用 useQuery 钩子查询数据库,如果出现错误,则将 error.message 存储在组件状态中,并将其显示在页面上。

结论

在使用 GraphQL 进行数据查询时,我们经常会遇到各种错误。了解 GraphQL 的错误处理方式以及如何在应用程序中处理这些错误非常重要。在本文中,我们介绍了 GraphQL 中的错误类型,以及如何使用错误处理器处理错误响应。我们还讨论了一些处理 GraphQL 错误的最佳实践,包括定义自定义错误类型、处理错误堆栈和忽略无用的错误。最后,我们提供了一个示例代码,展示了如何从 GraphQL 响应中提取数据和错误。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/67034e4ad91dce0dc84af56f


猜你喜欢

  • Mocha 如何测试 Express.js 中间件

    在进行前端开发中,我们通常会使用 Express.js 作为 Node.js 的服务器框架。在 Express.js 中,中间件是连接请求和响应之间的一个机制。为了保证中间件的正确性,我们需要使用测试...

    14 天前
  • 在 ES6 中使用解构来简化代码

    在ES6中使用解构来简化代码 ES6是Javascript中一种较为新的语言规范,解构是ES6中新增的一种编程语法。解构可以用来轻松地从数组中提取值或对象属性并将其赋给变量。

    14 天前
  • Jest 的快照机制

    在前端开发中,我们经常需要进行 UI 测试和组件测试。而 Jest 是一款流行的 JavaScript 测试框架,它具有许多强大的功能,其中之一便是快照机制。 快照机制是指在测试过程中,将测试的结果与...

    14 天前
  • ES9 中 Function.prototype.toString() 方法的改变带来的影响

    JavaScript ES9 中新增加了一个函数方法,即 Function.prototype.toString() 方法的改变,旧版本中该方法返回函数体的字符串表示,新版本中则会返回源代码中的代码片...

    14 天前
  • Docker 容器中如何安装 OpenJDK?

    OpenJDK 是一个开放源代码的 Java SE 实现,是 Java 技术的基础。在 Docker 容器中安装 OpenJDK 可以帮助我们更好地运行 Java 应用程序。

    14 天前
  • 解决 Deno 在 macOS 系统中的问题

    Deno 是由 Node.js 创始人 Ryan Dahl 创建的一个新型的运行时环境,可以运行 TypeScript 等语言编写的 JavaScript 应用。在使用 Deno 进行开发时,在 ma...

    14 天前
  • Cypress 测试时如何模拟鼠标移动

    鼠标移动是网页交互中非常关键的一个部分,有时候我们需要通过测试来确保在特定情况下网站的功能正常运行。Cypress 是一个流行的前端自动化测试工具,这里将介绍如何在 Cypress 测试中模拟鼠标移动...

    14 天前
  • Babel 使用规范

    随着前端应用的日益复杂,我们需要使用更高级的 JavaScript 特性。然而,为了确保代码可以在所有浏览器上运行,我们需要将代码转换为向后兼容的 JavaScript 版本。

    14 天前
  • 如何使用 JWT 保护 RESTful API

    随着互联网的发展,API 接口越来越成为各种应用程序之间交互的基础。但是,API 接口的安全防护问题也越来越严重。为了防止黑客攻击和数据泄漏,我们需要对 API 接口进行加强安全保护。

    14 天前
  • Node.js 性能优化的一些技巧和优化策略

    Node.js 作为一种流行的后端技术,并不缺少性能问题。在开发和部署 Node.js 应用时,优化性能是一个重要的任务。在本文中,我们将探讨一些优化 Node.js 性能的技巧和优化策略,以帮助开发...

    14 天前
  • React.js SPA 应用如何使用 axios 进行数据请求

    在 React.js 的开发中,我们可能需要从后端服务器中获取数据来渲染视图。为了实现这一过程并处理相关的网络请求,我们可以使用 axios 库。本文针对初学者阐述 React.js 应用中如何使用 ...

    14 天前
  • 使用 Jest 测试通用函数

    前端开发中,编写可重用的通用函数是一个常见的任务。这些功能通常运行在不同的应用程序或模块中,并用于执行诸如验证、处理和格式化等任务。 但是,在编写这些通用函数时,保证它们的正确性并不容易。

    14 天前
  • 如何创建一个无障碍的网站?

    在Web开发中,无障碍性(Accessibility)是指能够让尽可能多的人群可以方便地使用你的网站。这不仅包括视力障碍人士,也包括听力障碍人士,身体障碍人士等。 创建一个无障碍的网站需要从设计阶段就...

    14 天前
  • Deno 中使用本地缓存的方法

    本文将重点介绍如何在 Deno 中使用本地缓存的方法。随着 Deno 在前端开发者中的不断流行,越来越多的开发者都开始关注 Deno 的一些高级特性,比如本地缓存。

    14 天前
  • Server-sent Events 的安全性分析及加固措施

    概述 Server-sent Events(SSE)是一种用于服务器向客户端发送事件流的协议。SSE 可以用于实现实时通信、推送式通知、实时更新等功能。但是,SSE 在实际应用中也存在一些安全隐患。

    14 天前
  • ES7:通过 async/await 回归同步编码的美好时光

    ES7:通过 async/await 回归同步编码的美好时光 随着前端应用程序的复杂度不断提高,异步编程成为了一种不可避免的必要技能。常见的异步编程方式有回调函数、Promise、Generator等...

    14 天前
  • Kubernetes 集群中的服务负载均衡详解

    在 Kubernetes 集群中,服务负载均衡是十分重要的一环。它可以确保应用程序的高可用性和性能,使得应用程序可以在多个节点上运行,并且可以自动将流量从故障的节点转移至健康的节点。

    14 天前
  • 如何为 GraphQL API 添加监控和日志记录

    GraphQL 是一种优秀的 API 查询语言,它可以帮助开发者更加灵活、高效的查询和获取所需数据。但是,当我们使用 GraphQL 构建 API 时,也需要考虑到监控和日志记录,以便更好地管理和维护...

    14 天前
  • Koa.js 如何在页面顶部显示 loading

    在前端网页加载较慢的情况下,在页面顶部显示加载动画已经成为了一个非常流行的设计。Koa.js 是一个非常强大的 Node.js 框架,本文将介绍如何在 Koa.js 应用程序中实现页面顶部显示 loa...

    14 天前
  • 如何在 Flask 中使用 TailwindCSS

    介绍 TailwindCSS 是一种高效的 CSS 工具包,它可以让你快速编写自定义的、响应式的和可重用的样式,同时保持 HTML 结构的简单性和清晰性。在前端开发中,使用 TailwindCSS 可...

    14 天前

相关推荐

    暂无文章