GraphQL 中的错误处理详解

GraphQL 是一种面向客户端的查询语言和 API 标准,可以让客户端自定义需要获取的数据,无需后端开发人员预先定义好接口。但在实际开发中,错误处理是不可避免的一环。本文将为大家介绍 GraphQL 中的错误处理方法,并提供示例代码,助力读者更好地理解并应用于实际项目中。

错误类型

GraphQL 中包括两种类型的错误:查询错误和执行错误。

查询错误

查询错误在语法解析和验证前发生,例如语法错误和字段无效错误。这些错误由 GraphQL 引擎处理。下面是一个查询错误的示例:

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

在这个例子中,年龄 是一个错误的字段名,因此会返回以下错误:

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

执行错误

执行错误在语法解析和验证后,当服务器执行查询时出现。这些错误通常是由于服务端登陆验证产生的,因为请求的有效载荷可能包含错误或无效数据。例如,如果 id 是必需的,但没有传递进来,就会返回 null 或错误。下面是例子代码:

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

此查询期望传递一个名为 id 的整数参数,否则会返回错误。如果在执行时传递了非整数类型的值,则会返回以下错误:

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

错误处理方式

在 GraphQL 中,错误处理的方式取决于错误类型和代码实现。下面是常见的错误处理方式。

过滤错误字段

在 GraphQL 中,我们可以使用 try-catch 块来捕获执行错误,并过滤出只需要的键值:

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

在上面的代码中,如果在查询中发生了错误,则会将错误信息打印到控制台上,并返回一个 null 值。

抛出错误给客户端

如果希望将执行错误直接返回给客户端,可以单独处理它。例如,如果用户在请求中传递了无效的参数,我们需要向客户端返回一个400 Bad Request 错误:

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

在上面的代码中,如果在查询中发生了错误,将捕获该错误并抛出一个新的 Error,其中包含原始错误信息。

自定义错误

GraphQL 允许自定义错误类型和错误处理器。这是通过执行错误的 extensions 域来实现的。例如,可以为 HTTP 请求错误创建一个 HttpError 类:

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

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

然后,可以在服务器端基于异常返回自定义错误信息。例如,如果查询中不包含有效的 API key,则可以抛出一个 HttpError,返回 401 Unauthorized 错误:

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

在这里,异常将被捕获,并使用 HttpError 类型抛出。

结论

GraphQL 中的错误处理显然是构建并优化真实世界应用所必需的。本文详细介绍了 GraphQL 中的错误类型及其处理方法,并在代码示例中演示了如何自定义异常并为客户端提供更好的错误显示。对于即将开始开发一个 GraphQL 项目的前端工程师,掌握这些知识是至关重要的。希望本文能够帮助大家在 GraphQL 项目中更好地处理错误。

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


猜你喜欢

  • SSE中的超时机制及其应用

    随着 Web 技术的不断发展,前端开发变得越来越重要。其中,SSE(Server-Sent Events,服务器推送事件)技术是一种实现服务器向客户端实时推送数据的方法。

    4 天前
  • 使用 CSS Reset 应注意哪些细节

    在前端开发中,为了避免浏览器默认样式的干扰,我们通常会使用 CSS Reset 来将所有元素的样式重置为一致的基础样式。但是,使用 CSS Reset 也需要注意一些细节,下面将为大家详细介绍。

    4 天前
  • 如何使用 Express.js 和 Passport.js 实现 OAuth 2.0 认证

    在现代的 Web 开发中,OAuth 2.0 是一种重要的认证和授权协议。它可以方便地实现各种类型的授权,如用户授权、第三方 API 授权等。 在前端开发中,使用 Express.js 和 Passp...

    4 天前
  • Enzyme 和 Jest 的 React Native 应用测试初步实践

    Enzyme 和 Jest 的 React Native 应用测试初步实践 React Native 是一种流行的跨平台移动应用程序开发框架,已经被大量使用在制作各种类型的应用程序。

    4 天前
  • 在 GraphQL 中如何处理分布式架构

    在现代 web 应用程序中,分布式系统变得越来越常见。分布式系统可以更好地处理高负载或复杂的问题,同时也有助于减少单点故障。然而,对于前端开发人员来说,这样的系统可能会增加复杂性。

    4 天前
  • React Native 项目中如何处理安卓和 iOS 的平台差异?

    React Native 是一个跨平台移动应用开发框架,在开发过程中,需要考虑不同平台的差异,特别是在处理 UI 组件时。本文将介绍如何在 React Native 项目中处理安卓和 iOS 的平台差...

    4 天前
  • 响应式设计中处理页面过渡动画不一致的问题

    在当今的互联网时代,越来越多的人开始关注响应式设计。响应式设计是一种能够根据不同终端设备的屏幕尺寸和分辨率来自适应调整布局和交互的设计方式。响应式设计已经成为了前端开发中必须掌握的技能之一。

    4 天前
  • 使用 Node.js 和 Express 创建一个基本的用户注册和登录系统

    在现代 Web 开发中,用户注册和登录是必备功能之一。如果您正在构建一个基于 Node.js 和 Express 的应用程序,那么本文将指导您创建一个基本的用户注册和登录系统。

    4 天前
  • ECMAScript 2017 中的共享内存模型:SharedArrayBuffer 的应用场景

    JavaScript 是一门单线程语言,这使得展示繁重的处理任务变得特别困难。SharedArrayBuffer 是 ECMAScript 2017 中新的功能,它允许浏览器使用多个线程或 Web W...

    4 天前
  • Jest 测试中优化 mock 函数及其性能的技巧

    在前端开发中,测试是一项非常重要的工作。Jest 是一个流行的 JavaScript 测试框架,它具有高效,简单的特点,被广泛应用于前端开发中。 在测试中,mock 函数是一个非常重要的工具。

    4 天前
  • Tailwind 出现,Class Not Found 错误解决方法

    自从 Tailwind 出现后,越来越多的前端开发者开始使用它来设计页面。但是有时候会出现 Class Not Found 错误,这个错误很容易让开发者感到困扰。本文将详细介绍这个错误的原因和解决方法...

    4 天前
  • Next.js 中如何使用 Prettier?

    简介 Prettier 是一款代码格式化工具,支持 JavaScript、CSS、Markdown 等文件。它有着对代码格式需求的强制标准,但是可以消除团队协作开发过程中的代码风格差异,增加代码的可读...

    4 天前
  • Vue.js 数组响应式?

    Vue.js 是一个流行的 JavaScript 前端框架,它采用了响应式数据绑定的方式来实现数据与视图的自动同步。在 Vue.js 中,我们可以通过声明式模板语法来描述视图,只需要关注数据的变化,框...

    4 天前
  • 解决 PWA 中的高清图片加载问题

    在 PWA 应用中,图片的加载是一个非常重要且需要注意的问题。在保证图片清晰度的同时,又要保证应用的性能,这是一个相对困难的任务。本文将介绍如何解决 PWA 中的高清图片加载问题,并提供示例代码。

    4 天前
  • ES10 新特性 Object.getOwnPropertyDescriptors 的介绍和应用

    在 ECMAScript 2019 (ES10) 中,新增了 Object.getOwnPropertyDescriptors 方法,该方法可用于获取对象的所有属性的描述符。

    4 天前
  • 如何使用 CSS Reset 优化网站的访问速度

    在前端开发过程中,我们经常会遇到一些 CSS 样式的兼容性问题。不同的浏览器对同一样式的解析可能会有所差异,这样就会导致网页的排版出现问题。为了解决这个问题,我们可以使用 CSS Reset 手段来实...

    4 天前
  • 无障碍设计:如何减少网站中过度使用的动态效果?

    在现代网站中,动态效果是很普遍的,比如导航菜单展开和关闭、下拉框的显示和隐藏等等。这些动态效果给用户带来了良好的交互体验,但是对于一些用户来说,这些动态效果可能会造成视觉方面的困扰,甚至使他们无法访问...

    4 天前
  • 使用 Express.js 实现推送通知

    推送通知是一种向订阅者发送实时消息的方法,它可以使应用程序更加交互和实时。在前端开发中,我们可以使用 Express.js 构建后端服务来实现推送通知功能。本文将探讨如何使用 Express.js 实...

    4 天前
  • 使用 Enzyme 测试 React Native 的某些组件报错问题解决

    React Native 是一个流行的跨平台移动应用开发框架。在 React Native 中,我们可以使用 Enzyme 测试库来测试应用程序中的组件。但是,有时候我们尝试测试某些组件时可能会遇到报...

    4 天前
  • GraphQL 中如何处理同步和异步操作

    在前端开发中,通过 GraphQL 来进行网络请求已经成为了一个普遍的趋势。不同于 REST API 的方式,GraphQL 支持通过一个请求来获取更加精准和定制化的数据,以及对接多个数据源的复杂应用...

    4 天前

相关推荐

    暂无文章