在 GraphQL 中使用现有的 REST API 进行数据获取

前言

GraphQL 是一种用于 API 开发的查询语言和运行时。与传统的 RESTful API 相比,GraphQL 具有更为灵活的查询方式,可以让前端开发者根据自身需要从 API 中获取最小化、精确化的数据,减少了不必要的数据传输和浪费。

然而,一般情况下,我们所需要访问的 API 都是已经存在的 RESTful API,这时候,我们是否可以利用 GraphQL 查询语言来快速访问和转化这些 API 呢?

本文将详细介绍如何在 GraphQL 中使用现有的 REST API 进行数据获取,并附上对应的代码示例和学习指导。

什么是 REST API?

REST(Representational State Transfer,表示性状态转移)是一种软件架构风格,它在网络上实现了允许客户端发出请求并获取一个由服务器返回的 Web 资源的方法。这些资源通过一个全局唯一的标识符 URI 来表示。

在 RESTful API 中,资源表示为交换响应的 HTTP 资源,且每个资源都可以附带与其相关的资源中的任何信息。这意味着它使用 GET,PUT,POST 和 DELETE 方法来访问和更新这些资源。

如何使用 REST API 的数据进行 GraphQL 查询?

通常,在使用 GraphQL 查询时,我们需要先定义一个 GraphQL Schema,定义需要查询的字段和它们的相关数据类型。但在使用 REST API 的情况下,我们需要将 REST API 的 URL 作为 GraphQL 中的字段名,即为它们定义自定义的类型和自定义的字段 arguments。

以获取一个返回 JSON 数据的 REST API 为例,我们可以将其 URL 构建为一个可查询的 GraphQL 字段,例如:

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

其中 getUsers 是我们自定义的字段名,用于查询用户数据;User 是自定义的类型,表示返回的数据结构。接着我们需要在 User 类型中定义其结构,即返回 JSON 数据中的字段。

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

在这个例子中,我们预期服务器将返回一个 JSON 对象,该对象具有键值对 idusernameemail,其中 id 是一个字符串类型,username email 是字符串类型。我们将不会包含其他键值对。

然后,我们需要编写一个 resolver 函数,使其能够查询并返回 REST API 的数据,例如:

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

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

在这个例子中,我们使用 node-fetch 模块来进行请求,并在 resolver 函数里将 REST API 的数据解析为 JSON 数据。这样,我们就可以在 GraphQL 中使用 getUsers 查询来访问 REST API 并获取用户数据了。

如何处理基于关系的数据?

在 RESTful API 中,基于关系的数据通常需要在请求时进行多次嵌套查询,这在 GraphQL 中表现为深度嵌套的查询结构。例如,获取某一篇文章的评论需要先获取到该篇文章的 ID,然后再查询该篇文章下的所有评论。

在 GraphQL 中,我们可以使用 @defer@stream 两个 directive 来处理基于关系的数据,使其更直观和高效。例如,

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

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

在这个例子中,我们定义了两个 GraphQL 类型: PostCommentPost 对象包含四个字段:idtitlecontentcommentscomments 字段返回的是一个 Comment 类型的数组,并使用了 @defer directive。这表示 comments 字段不会在第一次查询时与 Post 类型一起返回,而是在必要时才进行嵌套查询。

另外,@stream directive 可以用于流式传输数据。例如,

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

在这个例子中,我们定义了一个 streamComments 查询,该查询返回一个带有 ID 参数的数组,使用了 @stream directive。这表示 streamComments 查询将立即返回一个空数组,但是我们可以随时更新这个数组,并将增量数据流发送回客户端。可以用于长轮询、WebSockets 或其他技术场景。

总结

在本文中,我们介绍了如何在 GraphQL 中使用现有的 REST API 进行数据获取。通过了解 RESTful API 的架构原理,我们可以使用自定义的 GraphQL 字段来查询 API 的数据。同时,当处理基于关系的数据时,我们可以通过使用 @defer@stream directive 来处理跨越多个嵌套查询的数据结构。

建议在实际项目中对 GraphQL 和 REST API 的结合进行实践,学习如何更加高效利用它们带来的优势。

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


猜你喜欢

  • ECMAScript 2020 (ES11) 中的 Dynamic Import(动态导入) 使用详解

    ECMAScript 2020 (ES11) 中引入了一个新的功能:Dynamic Import(动态导入)。它允许我们在代码运行时动态地导入一个模块。这个功能的引入使得前端开发更加灵活,同时也提高了...

    1 年前
  • Next.js Server-Side Rendering 实践总结

    在前端开发中,网站性能和用户体验是至关重要的。而一种提高性能和体验的方法就是采用 Server-Side Rendering(服务端渲染)技术。针对 Next.js 框架,本文将介绍 Next.js ...

    1 年前
  • Cypress 结合 Docker Compose 实现可靠的多环境测试方案

    前言 在前端开发中,自动化测试是非常重要的一个环节,它可以保证在不同的环境下代码的准确性以及可靠性。Cypress 是一个前端自动化测试工具,它可以帮助我们快速编写高效、稳定的测试用例,并且 Cypr...

    1 年前
  • Webpack3入门指南:FilterPlugin的使用

    Webpack是一个流行的前端打包工具,它可以将多个模块打包成一个或多个静态资源文件,从而提高网站性能和开发效率。在Webpack的配置文件中,使用插件可以帮助我们实现更多的功能。

    1 年前
  • ESLint 配置出错:解决 'Parsing error: The keyword 'const' is reserved' 错误

    在进行前端开发时,我们常使用 ESLint 作为代码规范检查的工具,以保证代码风格的统一。但在使用 ESLint 进行代码检查时,有时会遇到 Parsing error: The keyword 'c...

    1 年前
  • 如何在 TypeScript 中解决 JS 全局变量的命名冲突?

    在 JavaScript 中,全局作用域是非常常见的。如果我们在一个项目中使用了大量的全局变量,就有可能遇到命名冲突的问题。在这种情况下,我们可能需要使用闭包或名称空间来避免这个问题。

    1 年前
  • ES6 的 Rest、Spread 多功能运用

    ES6 的 Rest、Spread 多功能运用 在开发过程中,我们常常会遇到需要操作数组或对象的场景。ES6 提供 Rest 和 Spread 运算符,大大增加了我们在编码中操作数组和对象的灵活性。

    1 年前
  • # ECMAScript 2021 中的 Object.setPrototypeOf 方法详解

    ECMAScript 2021 中的 Object.setPrototypeOf 方法详解 在 ECMAScript 2021 中,引入了新的方法 Object.setPrototypeOf(),其作...

    1 年前
  • 在 Deno 中使用 Mocha 和 Chai 进行测试

    前言 Deno 作为一款新兴的 JavaScript 运行环境,它的安全、简单、快速等特点备受关注。但是,开发者们不仅仅需要一款高效的运行环境,还需要一款能使开发变得更加简单和高效的工具,比如单元测试...

    1 年前
  • 使用 Nexus 构建类型安全的 GraphQL API

    使用 Nexus 构建类型安全的 GraphQL API GraphQL 是一种强类型的查询语言,迅速成为前端开发的重要技术之一。随着 GraphQL 的流行,越来越多的开发者开始关注 GraphQL...

    1 年前
  • 响应式设计中处理模糊图片加载的技巧

    随着移动设备的普及,响应式设计已成为前端开发的重要技能之一。在响应式设计中,我们经常需要处理图片的自适应问题。如果不恰当地处理图片大小和分辨率,页面加载速度将会受到影响。

    1 年前
  • Sequelize 如何重命名表字段?

    在进行数据库设计和开发时,数据表字段的命名往往是一个比较重要且需要仔细考虑的事情。在某些情况下,我们可能需要对表中的某些字段进行重命名。如果我们使用 Sequelize 作为我们的 ORM 框架,那么...

    1 年前
  • ES7 支持更多的数学运算方法

    ES7 支持更多的数学运算方法 在 ES7 中,JavaScript 引入了很多新的特性,其中有一些特性是针对数学运算的。这些新的特性让处理数学运算更加方便和快捷,同时也提高了代码的可读性和可维护性。

    1 年前
  • SSE 如何实现在多个页面之间传递数据?

    在前端开发中,如何实现在多个页面之间传递数据是一个重要的问题。传统的方式包括使用 cookie、localStorage、sessionStorage 或者通过 URL 参数传递,但是这些方式都存在一...

    1 年前
  • 使用 Chai 扩展的复杂 API 测试

    在前端开发中,我们经常需要测试复杂的 API,尤其是在开发大型应用程序时。Chai 是一个流行的 JavaScript 测试框架,它支持多种编程风格,包括 BDD 和 TDD 等,使我们能够更加舒适地...

    1 年前
  • React 组件测试利器——Enzyme

    React 组件开发的核心就是组件的编写和组件的测试。测试不仅仅能够检查代码的正确性,更能够提高代码的质量和可维护性。因此,React 也提供了一些相关的测试工具和框架来方便测试的编写和执行,其中,E...

    1 年前
  • ES9 async 函数和 Promise 的深入剖析

    ES9 async 函数和 Promise 的深入剖析 在 Web 开发中,使用异步操作是日常工作中的常态。ES6 引入了 Promise,简化了异步操作,而 ES9 引入了 async 函数,进一步...

    1 年前
  • 如何使用 Tailwind CSS 进行构建主题色彩设计?

    Tailwind CSS 是一种现代化的 CSS 框架,可以帮助您快速构建具有响应性和优秀设计感的网站。其中的主题色彩设计可以让您的网站更具有个性化的特色和吸引力。

    1 年前
  • 使用 Material Design 开发时如何避免出现 FAB 显示不完整的问题

    FAB(Floating Action Button)是 Material Design 中的一种交互设计元素,常用于浮动在页面底部或右下角,提供一个主要的操作或快速入口。

    1 年前
  • 如何使用 LESS 加速开发

    随着前端技术的快速发展,我们可以使用各种工具和框架来加速我们的开发过程。LESS 是其中一个非常流行的 CSS 预处理器,可以帮助我们更加高效地编写 CSS。本文将介绍 LESS 的基本功能,以及如何...

    1 年前

相关推荐

    暂无文章