GraphQL 错误处理最佳实践

GraphQL 是现代应用程序的API查询语言,它通过类型化的查询语法获取数据。 GraphQL 提供了非常好的可扩展性,但是错误处理往往被忽略。错误处理是所有应用程序的重要组成部分,因此在实施 GraphQL 调用时要考虑错误处理最佳实践。

GraphQL 错误类型

在 GraphQL 中,有两种类型的错误:

  1. 语法错误:这些错误在查询中发现。 GraphQL 不支持的查询语法可能导致语法错误。
  2. 运行时错误:这些错误发生在查询解析和验证后的执行阶段。 例如,查询无法满足模式或无法满足引用数据。

1. 明确标识错误

GraphQL 打破了 REST API 的传统响应模型,其中成功操作和错误操作都以 200 错误码返回,这使得难以通过错误码确定操作结果。在 GraphQL 中,我们可以使用自定义类型表示错误并标识出有效的响应。

以下示例演示了 GraphQL 查询中使用错误类型:

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

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

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

我们可以使用 UserResult 类型来返回 User 或错误。如果查询成功,则设置 UserResult.success = true 并将用户对象设置为 UserResult.user。如果查询失败,则设置 UserResult.success = false 并将错误消息设置为 UserResult.error

2. 记录错误

与其他应用程序一样,重要的一点是记录错误。 GraphQL 查询也不例外。 在 GraphQL API 响应中添加错误信息,以便开发人员可以从日志中轻松确定错误。

GraphQL 有两种方法记录错误:logsmonitors

  • 日志记录:将错误消息写入日志文件中,以便稍后进行分析和处理。
  • 监视器:可以使用各种监视器工具,例如 Prometheus、Newrelic 和 Grafana。这些工具可以帮助我们监控查询性能并报告任何错误。

以下示例演示了记录错误的方法:

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

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

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

在以上示例中,ErrorType 根据需求定义了查询时返回错误的具体信息。

3. 显示友好的错误信息

GraphQL API 遵循客户端驱动的设计,这意味着 GraphQL API 必须针对客户端要求做出响应。 因此,错误处理应该始终从最终用户的角度考虑。 友好的错误信息可以帮助前端开发人员查找错误并有效地解决问题。

以下示例演示了如何在 Node.js 中捕获并返回友好的错误信息:

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

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

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

总结

GraphQL 是一种强大的API查询语言,错误处理是 GraphQL 支持的一项强大功能。实现 GraphQL 错误处理最佳实践需要记录错误信息、明确标识错误、并提供友好的错误信息。 错误处理越简单,代码中的 bug 就越少。 然后,在应用程序中实现正确的错误处理将大大提高用户体验。

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


猜你喜欢

  • 利用 Mocha 和 Chai 来测试 React 组件

    React 是一个前端的 JavaScript 库,用于构建用户界面。然而,在开发 React 应用时,如何确保组件的功能和样式正确无误呢?这就需要我们学习如何使用测试框架来进行自动化测试。

    1 年前
  • 如何在 Tailwind 中使用 Less 和 Scss?

    Tailwind 是一个非常流行的前端框架,它提供了强大的工具来快速构建精美的用户界面。不过,有时候你可能希望在 Tailwind 的基础上添加一些自己的特色。这时,使用 Less 或 Scss 来扩...

    1 年前
  • Webpack 打包后的 JS 文件过大怎么办?

    Webpack 是目前前端开发中非常流行的构建工具之一,它可以将多个 JavaScript 文件打包合并成一个文件,以提高网页加载速度和性能。然而,在使用 webpack 进行打包时,有时会出现打包后...

    1 年前
  • Custom Elements: 使用 Polymer 和 WebComponents.js 的必要性和区别

    随着 Web 技术的发展,前端开发越来越注重组件化、模块化和可复用性,为此,W3C 在 2013 年发布了 Web 组件规范。而 Custom Elements 则是其中的一项关键特性,对于前端开发来...

    1 年前
  • Material Design Icon Font 的用法指南

    Material Design 是一种新的设计风格,目前很流行。Material Design Icon Font 就是 Material Design 的一个重要组成部分。

    1 年前
  • TypeScript 泛型在实践中的应用

    TypeScript 泛型在实践中的应用 随着前端技术的不断发展,JavaScript 已经成为了 Web 开发最重要的编程语言之一。但是,由于 JavaScript 编程语言本身的设计和特点,以及前...

    1 年前
  • ES7 中的 Symbol 在项目中的实际应用

    Symbol 是 ES6 中引入的一种新类型的数据结构,它是一种独特不可变的数据类型,其生成的每个值都是唯一且不可变的。而 ES7 中进一步加强了 Symbol 类型,为开发者带来了更多的便利,可以帮...

    1 年前
  • Vue.js 如何在多个组件之间共享状态?

    Vue.js 是一个流行的前端框架,具有易于学习和使用的优点,允许开发者用简单明了的方式构建复杂的应用程序。但是,当我们需要在多个组件之间共享状态时,此框架的某些特性可能会造成困扰。

    1 年前
  • 基于 Hapi 的 RESTful API 快速开发及实现

    随着互联网的不断发展,Web API(应用程序接口)成为了各种 Web 应用程序开发的重要组件之一。而 Hapi 是一个基于 Node.js 的 Web 应用框架,可以帮助开发者快速构建 Web AP...

    1 年前
  • 如何使用 Babel 转码器从 ES6 到 ES5

    在前端开发中,我们经常会使用一些新的语言特性和 API 来提高开发效率和代码质量,但是这些新特性并不是所有浏览器都支持的,这时候就需要使用 Babel 这种转码器将代码从 ES6 转换为 ES5,以保...

    1 年前
  • 如何编写高效的 switch-case 表达式:ES11 中新增的秘密武器

    在编写前端代码时,我们经常需要根据不同的条件执行不同的操作。在 JavaScript 中实现这个功能最常见的方法是使用 switch-case 语句。然而,如果使用不当,这种结构可能会导致代码冗长、难...

    1 年前
  • 如何在 Deno 中使用 TypeScript?

    前言 Deno 是一个类似于 Node.js 的 JavaScript/TypeScript 运行时环境,但它在安全性、模块化、异步 I/O 等方面有很多不同之处。

    1 年前
  • CSS Reset 原理与实现方式详解

    前言 在开发 Web 页面时,我们经常会遇到一些兼容性问题,特别是在不同浏览器中的样式表现可能会有很大的差异,这导致我们需要为每个浏览器单独写一份样式表。 而 CSS Reset 就可以帮我们解决这个...

    1 年前
  • 使用 HTML 和 CSS 来实现无障碍体验

    在今天的数字化时代,无障碍体验变得越来越重要。这包括网站和应用程序中的内容和设计,以确保对所有人都可以无障碍地访问。在这篇文章中,我们将深入探讨如何使用 HTML 和 CSS 来实现无障碍体验,帮助更...

    1 年前
  • 详解 React SPA 应用开发的优化方法

    React SPA(单页应用)常常会面临开发效率低下、页面加载速度慢等问题。为了解决这些问题,需要进行合理的优化,以提高开发效率、优化用户体验。本文将详细介绍一些 React SPA 开发的优化方法,...

    1 年前
  • 如何在 GraphQL 中实现分页查询

    GraphQL 是一种用于 API 的查询语言,它可以帮助前端开发者更高效地向后端 API 请求数据,并对数据进行筛选和配置。在实际开发中,需要对大量数据进行分页处理,以确保查询效率和数据的合理性。

    1 年前
  • ECMAScript 2021 新特性之链判断 Optional chaining 详解

    在前端开发中,经常会遇到需要对嵌套的对象或数组进行取值操作的情况,不过我们也会遇到这样的问题,就是在对象或数组中有层级缺失的情况下,使用传统的取值方法会导致代码报错或出现异常情况。

    1 年前
  • Docker 容器中如何安装 Apache Tomcat?

    什么是 Docker? Docker 是一款适用于构建、发布和运行应用程序的开源容器化平台。通过 Docker,开发者可以将应用程序打包成一个可移植的容器,使应用程序可以在任何环境中运行,从而提高了应...

    1 年前
  • Angular如何实现文件上传功能

    文件上传是Web开发中常用的功能之一,Angular作为目前流行的前端框架之一,提供了多种方式实现文件上传功能。本文将介绍Angular的官方指南中提供的方式以及一些常用的第三方库的使用方法,还会分享...

    1 年前
  • 如何使用 ES6/ES7 和 ES10 中的 String.trimStart() 和 String.trimEnd()

    在日常前端开发中,字符串操作是一个重要的部分。JavaScript 提供了很多函数用于字符串操作,包括截取、查找、替换等。其中,ES6/ES7 和 ES10 中新增的 String.trimStart...

    1 年前

相关推荐

    暂无文章