如何使用 GraphQL 进行数据层的开发工作

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

GraphQL 是一种比传统 REST API 更为灵活和高效的数据查询语言,当今前端开发中越来越受到欢迎。它可以帮助我们快速地定义数据模型和数据查询方式,并且让前端开发者更能够在数据交互方面发挥自己的专业技能。本文将为大家介绍如何使用 GraphQL 进行数据层的开发工作,内容详细且有深度和学习以及指导意义,同时还包含示例代码。

GraphQL 入门

GraphQL 是一种由 Facebook 开源的查询语言,它可以通过 API 查询端点来获取需要的数据。最初用于在 React 中管理数据,它已经成为现在多个语言和 Web 框架的标准了。GraphQL 的基本思想是将数据看做一个图形,然后定义查询这张图的方式。因此,我们在使用 GraphQL 进行数据查询时,只需要关注需要查询的数据的结构和字段即可,而不用关心后端是如何实现的。下面我们假设一个网络应用需要获取某个博客文章的所有评论,下面是一般 RESTful 查询方式的 URL 请求:

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

这里我们需要填写对应的文章 id,但我们并不清楚所需查询的评论具体有哪些字段。如果使用 GraphQL 则可以这样创建查询:

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

GraphQL 查询中可能包含多个查询方法。上面的例子中我们定义了一个名为 GetBlogComments 的查询函数,它需要传入文章的 id 以获取查询结果。这里我们定义一个变量 $postId,用来传递参数。GetBlogComments 查询中还包含了其他多个查询函数,比如 postcomments。通过 post 查询我们可以查询到当前文章的所有信息,比如标题、分类、作者等;通过 comments 查询我们可以获取到所有评论的数据信息。在这两个查询函数中,我们通过字段名来查询具体的数据字段。在上面的示例中,我们查询了评论的 id,text 和 author,同时也查询了作者的 id 和 name。

GraphQL 的优势

上面简单介绍了 GraphQL,接下来我们来了解一下 GraphQL 的一些优势:

灵活性

GraphQL 的最大优势是其灵活性。与传统的 REST API 不同,GraphQL 的查询结果可以精确地符合我们的需求。例如,在通过 REST API 获取数据时,如果要获取 User 某个属性的值,可能需要向服务器请求整个 User 对象,然后在本地提取出需要的属性;而在 GraphQL 中,则可以通过指定需要查询的属性,直接访问目标属性。

性能

在传统 REST API 中,当需要查询多个实体时,需要进行多个请求。每个请求都需要建立连接和验证身份,这将导致网络请求和效率变慢。在使用 GraphQL 进行数据查询时,则只会发起一次请求即可获取需要的全部数据。这样可以有效提高网络请求的效率。

可扩展性

GraphQL 旨在为未来的功能提供完整支持。它旨在构建一个强大的查询语言,可以轻松扩展,因此可以支持更多功能。GraphQL 还允许 API 的不同版本之间的平滑转换。

使用 GraphQL 进行数据查询

理解了 GraphQL 的概念和优势,我们可以考虑使用 GraphQL 进行数据查询。为了说明如何将 GraphQL 添加到您的应用程序,请考虑以下步骤:

1. 创建 GraphQL schema

在开始查询之前,我们需要定义数据模型和结构。GraphQL 使用 schema 来描述数据的结构和类型,它可以帮助我们了解可用的查询类型和可用的数据源。下面是一些示例代码:

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

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

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

在该模式中,我们定义了 Query 类型来公开所有书籍的 allBooks 这一个查询函数。其余两个类型为 BookAuthor,这些类型定义了数据模型的字段。

注意 ! 表示类型不可为空。

2. 编写 GraphQL 查询

在了解了模式之后,我们可以开始编写查询语句。查询可以使用 GraphQL 中的一些特定的语法,我们可以通过它们指定期望的查询对象。下面是一些示例代码:

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

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

该查询将获取 ID 为 1 的 Authorname,和所有 Booktitle 和对应的作者 name

3. 定义 GraphQL 的 resolver

我们可以通过 resolver 来实现 GraphQL 查询,resolver 是一个命令式的查询处理程序,它可以根据查询的类型和输入来检索或计算数据。

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

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

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

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

在上面示例中,我们定义了 Query 解析器,allBooksauthor 表示数据源中的两个不同实体。resolver 接收两个参数,第一个参数为父节点,本例中我们使用 _ 占位符将其跳过。第二个参数是由调用方传递的参数集合对象,其中查询参数会自动映射到这里。

BookAuthor 的解析器类似。这些函数接收一个实体作为输入,并根据需要获取它们之间的关系。

4. 建立 GraphQL 服务器

通过使用以下命令,我们可以构建 GraphQL 的服务器:

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

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

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

在上面的示例中,我们使用了 apollo-server-expressexpress 并创建一个实例 server。然后,我们通过将应用程序中间件配置为 server 对象来将其连接到 express 服务器上。

接下来,我们可以在浏览器中访问 http://localhost:PORT/graphql 获取 GraphQL 服务器的 Playground 界面,即 GraphQL 的 Web 调试工具。

结论

我们已经了解了如何使用 GraphQL 进行数据层开发。在实际开发中,通过使用 GraphQL,可以帮助我们快速定义数据模型和查询方式,有效使用 API 资源。GraphQL 的重要性越来越受到前端开发者们的认可和关注,值得我们不断深入学习和使用。

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


猜你喜欢

  • PWA 应用中的 HTML5 Web storage 技术应用实践

    前言 PWA(Progressive Web App)是一种结合了 Web 和 Native 的应用程序,能够提供类似于原生应用程序的用户体验。这种技术是通过一系列的 Web 技术来实现的,其中 HT...

    10 天前
  • Web Components—— 前端组件化的概念、原理、布道模板

    在前端开发中,组件化一直是一个非常重要的话题。在各种框架的帮助下,前端开发人员可以轻松地构建复杂的应用程序。但是,在某些情况下,框架可能并不是最佳选择。为了解决这个问题, Web Components...

    10 天前
  • Promise 如何解决多个异步操作并行执行的问题?

    引言 在前端开发中,我们常常需要处理异步操作。在我们的代码中,我们常常遇到多个异步操作需要同时执行的情况。这时候,我们需要一种方法来确保这些异步操作可以并行执行,同时我们又需要在所有异步操作执行完成后...

    10 天前
  • 使用 Hapi 框架实现文件上传

    在现代 web 应用程序中,文件上传是常见的需求之一。Hapi 是一个用于构建应用程序和服务的 Node.js 框架,它提供了易于使用的 API 和插件生态系统,可以轻松地实现文件上传功能。

    10 天前
  • 性能优化实战:移动端网页性能优化实践

    在现代网络应用中,好的性能是非常重要的,尤其是在移动设备上。移动端网页性能优化是一个复杂的过程,需要从各个方面进行优化。本文将介绍从页面加载速度、资源压缩、DOM 操作优化、事件委托等多个方面进行移动...

    10 天前
  • Angular 中的 AfterViewInit 生命周期

    在 Angular 中,生命周期函数是非常重要的概念。其中 AfterViewInit 生命周期是在组件视图初始化完成后触发的,通常用于执行一些针对视图层的操作。本文将详细介绍 Angular 中如何...

    10 天前
  • 响应式设计中遇到的断点问题和解决方法

    在移动设备的普及和互联网的不断发展下,响应式设计成为了前端开发中必不可少的一部分。响应式设计的主要目的是通过自适应布局来适应不同屏幕、不同大小的设备,并为用户提供更好的用户体验。

    10 天前
  • Chai 报错 TypeError: Cannot read property 'throw' of undefined 的解决方法

    简介 在前端开发中,单元测试是常见的开发方式,而 Chai 是一个流行的 JavaScript 断言库,它提供了多种语法供开发者进行测试。然而,使用 Chai 进行测试时,有时会出现 TypeErro...

    10 天前
  • 如何将 ESLint 与 Webpack 关联起来 —— 您的代码质量将直接提升

    ESLint 和 Webpack 是前端开发中常用的两个工具。ESLint 用于检查代码是否符合规范,Webpack 用于打包和处理前端资源。将两者结合起来,可以提升代码的可读性和可维护性。

    10 天前
  • 当我们需要一个测试框架时为什么选择 Jest?

    在前端开发中,测试是非常重要的一环。测试可以帮助我们保证代码的质量,减少出错概率,提高代码的可维护性。而测试框架是实现这些测试的重要工具。在众多测试框架中,Jest 是一个非常流行的选择。

    10 天前
  • Mocha 参数化测试详解及代码样例

    在前端自动化测试中,参数化测试是一个非常重要的概念。它可以让我们针对不同的测试数据进行测试,并且能够有效地减少代码重复。在 JavaScript 中,我们可以使用 Mocha 框架来实现参数化测试。

    10 天前
  • RxJS:使用 RetryWhen 解决异步请求中的重试错误

    在前端开发中,异步请求是一项常见的任务。然而,这些异步请求并不总能成功。当网络错误或其他问题出现时,这些请求可能会失败。这时候,我们通常会尝试重新发送这些请求,以期望最终能够成功。

    10 天前
  • Headless CMS 上常见图片处理问题及解决技巧

    在 Headless CMS 中,图片处理是一个经常需要处理的问题。图片既可以用于网站设计和展示,也可以用于移动端应用。在处理图片的同时,我们需要注意到一些常见问题并掌握相应的技巧来解决。

    10 天前
  • ES7 中的 Unicode 属性转义

    ES7 中的 Unicode 属性转义 在前端编程中,Unicode 属性转义是一个非常常见的任务。它可以用来识别字符串中包含的各种 Unicode 字符。ES7 中引入了新的 Unicode 属性转...

    10 天前
  • 如何在 Next.js 中使用 Tailwind CSS 框架?

    引言 Tailwind CSS 是一个灵活且易于定制的 CSS 框架。它采用了一种独特的方式,通过在 HTML 中嵌入一系列 CSS 类来快速构建界面样式,尤其适合于快速迭代和原型开发。

    10 天前
  • 初学者必看:PWA 技术快速入门

    随着移动互联网的兴起,Web 应用程序越来越受到关注。但是,这些 Web 应用程序必须要克服一个很大的问题:缺乏 Native 应用程序的可用性和性能。在过去,Web 应用程序无法与桌面或移动应用程序...

    10 天前
  • Promise 如何处理嵌套回调函数的问题?

    背景: 在前端开发中,回调函数常常被使用来处理异步操作。但是,当存在大量异步操作的时候,回调函数嵌套的层数会非常深,这样不仅难以阅读,而且还容易出现BUG,给代码的维护带来非常大的困难。

    10 天前
  • CSS Grid 布局中常见的 5 个错误及解决方案

    介绍 在前端开发中,CSS 布局扮演了非常重要的角色,而 CSS Grid 布局则是其中的一个重要部分。CSS Grid 布局提供了一种新的方式来实现网站的布局,提供了更高效、更灵活的方式来设计和排版...

    10 天前
  • Sequelize 中如何使用 TransactionManager 实现数据事务操作

    在实际的应用开发过程中,数据库操作是非常常见的一项任务。而在某些特定场景中,需要将多个数据库操作作为一组操作来执行,这时我们需要使用到事务(transaction)。

    10 天前
  • 从传统 API 过渡到 GraphQL 的成功故事

    随着互联网技术的不断发展,传统的 API 设计已经逐渐无法满足现代应用的需求。GraphQL 作为一种新的 API 设计方式,已经被越来越多的前端开发者所采用。 本文将介绍一个从传统 API 过渡到 ...

    10 天前

相关推荐

    暂无文章