GraphQL 中最好的错误解析器——GraphiQL

面试官:小伙子,你的代码为什么这么丝滑?

GraphiQL 是一个强大而灵活的 GraphQL IDE,它为开发人员提供了易于使用的界面,可以用于测试、查询和浏览 GraphQL API。除此之外,GraphiQL 还提供了一个最好的错误解析器,为开发人员提供了快速和准确的 GraphQL 错误分析。

GraphiQL 提供的错误解析器

GraphiQL 自带了一个错误解析器,能够直接将GraphQL返回的错误信息可视化,这对于开发人员来说非常有用,因为GraphQL 通常返回了深层嵌套的错误信息,使开发人员很难准确地确定错误的发生位置和原因。GraphiQL 错误解析器可以将这些深层嵌套的错误信息以可视化方式呈现,大幅度提高了开发人员的调试效率。

例如,下面是一个 GraphQL 查询:

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

如果此查询中发生了错误,GraphiQL 可以像这样提供有用的错误信息:

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

这个提示告诉开发人员在“user”字段中的”id”参数上发生了错误,这是一个无效的值。它甚至还提供了错误的行号和列号,以帮助开发人员更快地找到问题所在。

如何使用 GraphiQL 错误解析器

使用 GraphiQL 错误解析器非常简单,因为它已经内置在 GraphiQL IDE 中了。只需将 GraphQL 查询和变量复制粘贴到 GraphiQL 编辑器中,然后单击“运行”按钮即可获得返回的错误信息。如果存在错误,GraphiQL 将在错误信息细节下显示具体的错误信息。

下面是一个使用 GraphiQL 进行错误解析的示例代码:

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

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

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

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

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

以上示例代码将通过”graphql-request”来请求 GraphQL API,其中错误信息是通过将错误对象的“response.errors”属性输出到控制台中来获取和解析的,并将 Gson 库的 GsonBuilder 类型适配器应用于每个输出。

结论

通过本文,了解了 GraphQL 中最好的错误解析器--GraphiQL,并通过示例代码等详细深入的解析与学习来确保开发人员在使用 GraphQL API 时移步效率的同时,准确地捕获和解决错误。如果你是一个前端开发人员并且在设计和使用 GraphQL API 中遇到了错误,建议你尝试使用 GraphiQL 以解决问题。

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


猜你喜欢

  • 通过 ARIA 实现无障碍导航,开创更多可能

    Web 应用程序的无障碍性是现代前端开发中不可或缺的一部分。以前端开发者的角度来看,实现无障碍性可以为不同类型的用户创建更好的体验,提高其交互能力,实现更广泛的可访问性,从而增加使用量和用户忠诚度。

    5 天前
  • CSS Grid 布局与响应式图片

    在现代网站设计中,响应式布局和响应式图片已经成为了不可或缺的元素。CSS Grid 布局是一种强大的排版工具,可以为我们提供更好的响应式布局功能。本文将介绍如何使用 CSS Grid 布局实现响应式图...

    5 天前
  • Express.js 中开发高可用性 Web 应用的方法和技巧

    前言 在现代 Web 应用开发中,可用性是非常重要的因素之一。可用性是指用户能否顺利地使用应用,不会遇到意外的错误或中断。为了实现高可用性的 Web 应用,我们需要选择适合的框架,并且遵循一些开发规范...

    5 天前
  • 如何在 Promise 中处理 finally 抛出的错误

    Promise 是 JavaScript 中处理异步操作的现代工具。使用 Promise 可以避免回调地狱,将异步操作的结果作为参数传递给其它函数,并链式调用多个异步操作。

    5 天前
  • React Native 单元测试:使用 Enzyme 生成快照测试的方法

    React Native 是由 Facebook 推出的跨平台移动应用开发框架,让开发者可以用一套代码同时构建 iOS 和 Android 应用。然而,增长快速的代码库需要稳定的基础,为了确保代码质量...

    5 天前
  • React + Headless CMS 构建 SEO 优化的博客网站实践

    引言 随着技术的发展,前端领域变得越来越复杂,SEO 优化也变得越来越困难。传统的动态网页的 SEO 优化由于页面内容是由后端渲染出来的,因此无法实现静态的优化。而前端渲染出来的页面虽然相对于动态页面...

    5 天前
  • 如何在 Tailwind CSS 中添加自定义滚动条

    在 web 开发中,滚动条是一个非常重要的元素。当我们需要在网页中展示大量的内容时,使用滚动条可以让用户轻松地查看和浏览页面内容。当然,毫无疑问,一个自定义的、与网页风格相符的滚动条能够增加我们网页的...

    5 天前
  • JavaScript 中的事件处理机制及其应用

    JavaScript 中的事件处理机制是指对用户操作做出响应的机制,例如单击按钮、滚动页面等。本文将深入介绍 JavaScript 中的事件处理机制,包括事件模型、事件类型、事件流以及事件处理函数等,...

    5 天前
  • 如何让无障碍用户更容易定位重要内容

    在 web 开发中,我们经常会遇到这样的情况:需要将某些重要内容放在页面中,方便用户浏览和查看。但是对于无障碍用户,能否正确地找到这些重要内容却是一个挑战。因此,为了保证网页的可访问性,我们需要采取一...

    5 天前
  • 解决表单提交超时问题:利用 SSE 自动拉取新页面

    在 Web 开发中,表单提交是非常常见的操作,它允许用户在网页上输入数据并提交到服务器进行处理。然而,在某些情况下,表单提交可能会因为网络延迟或服务器繁忙等原因而超时,导致用户无法收到处理结果,或者需...

    5 天前
  • 如何在 Angular 应用程序中使用 Material Design 组件

    Angular 框架是一种流行的前端开发框架,它可以帮助开发人员快速构建现代化的 Web 应用程序。而在前端界,Google 的 Material Design 成为了一种设计风格的标准。

    5 天前
  • 如何使用 CSS Grid 和 Flexbox 创建响应式布局!

    当我们构建一个网站或者应用程序时,我们经常需要一个能够适应不同屏幕尺寸及分辨率的布局。同时,我们希望这个布局能够简单、灵活和易于维护。 在这篇文章中,我们将会学习如何使用 CSS Grid 和 Fle...

    5 天前
  • CSS Grid 布局中如何优雅地处理保护行和列

    随着各种设备屏幕尺寸和方向的增多,web 布局也不再是只考虑固定尺寸的单一方向了。CSS Grid 布局作为一种新的技术,能够更好地解决这些问题。然而在实际使用过程中,我们经常会遇到需要保护一些行和列...

    5 天前
  • Node.js 中的 Hapi 教程:学习如何为 Web 应用程序创建 API

    如果你是一名前端开发人员,你一定知道 Node.js 这个平台。它允许使用 JavaScript 来编写后端应用程序和工具,而不仅仅是在浏览器中运行。在这个平台上,有许多库和框架可供选择,Hapi 就...

    5 天前
  • 在 Express.js 中实现数据缓存的方法和最佳实践

    当我们开发基于 Express.js 的 Web 应用程序时,经常遇到处理重复数据查询的问题。为了解决这个问题,我们可以使用缓存来减少对数据库的访问并提高网站性能。

    5 天前
  • Angular 中如何使用 @Pipe 装饰器创建自定义管道

    在 Angular 中,@Pipe 装饰器可以帮助我们创建自定义管道。管道可以将输入值转换成需要的输出值,以便我们更好地呈现数据。在本文中,我们将介绍如何使用 @Pipe 装饰器创建自定义管道,并提供...

    5 天前
  • ES6 模块化的前世今生

    随着 web 技术的发展,前端开发变得越来越复杂,在管理代码方面也变得越来越重要。在过去,我们使用传统的 <script> 标签来加载脚本,但这种方式在大型项目中可能会引发一些问题,如污染...

    5 天前
  • 如何在 Tailwind CSS 中添加自定义变换 | 设计思路

    尽管 Tailwind CSS 可以自定义颜色、字体等基本属性,那么如果你想添加自定义的变换(Transform),例如 skew、rotate 等,该怎么办呢? 在本文中,我将详细探讨在 Tailw...

    5 天前
  • 优化 CSS Flexbox 布局和性能的技巧

    Flexbox 已经成为现代 Web 布局的一部分,它可以帮助前端开发者轻松处理复杂布局。Flexbox 布局是一个强大的工具,但是如果使用不当,性能问题就会显而易见。

    5 天前
  • 解决 Node.js 中监听事件内存泄漏问题

    什么是事件监听内存泄漏? 在 Node.js 中,事件监听器是一种注册到对象上的回调函数。每当该对象发出事件时,它将调用所有已注册的事件监听器。这使得您可以轻松地在应用程序中实现异步编程,并且您可以在...

    5 天前

相关推荐

    暂无文章