随着现代 Web 应用程序的不断发展,前端开发人员越来越需要处理更加功能复杂的 API。在这个环境下,GraphQL 已经成为了一种非常流行的 API 编写方式。
GraphQL 是 Facebook 推出的一种针对 API 的查询语言和运行时,它提供了一种更加高效、强大和灵活的方式来描述和请求 API 数据。与传统 RESTful API 相比,它能优化 API 响应时间、降低网络流量、简化代码结构、丰富文档信息等。
本文将介绍 GraphQL 的基本概念和用法,指导你从头开始学习 GraphQL,并编写出自己的 API。
GraphQL 基本概念
在开始学习 GraphQL 之前,我们需要了解一些基本概念,它们是构成 GraphQL 的重要组成部分:
类型系统
GraphQL 中的类型系统定义了可用于查询和更改 API 数据的所有可能类型。它包括标量类型(如整数、浮点数、字符串等)和自定义类型(如对象和列表)。
架构
GraphQL API 的架构是由类型系统组成的,它描述了 API 数据的组织方式和可访问性。架构由类型定义、查询、变量、指令等构成。
查询方式
GraphQL 中的查询方式是用来描述客户端需要获取哪些数据的语言。它提供了一种声明式的方式来查询 API 数据,使得客户端能够更加精确地指定需要的数据。
解析器
GraphQL 解析器是用来将客户端的查询转化为可执行的操作的组件。它基于类型系统和构建 API 的程序代码,可以将查询映射到有效的数据查询或修改。
GraphQL 应用场景
在这里,我们来看一下 GraphQL 的应用场景,它们是 GraphQL 出现的主要原因。
多数据源整合
GraphQL 可以整合多个数据源,从而提供更加全面和丰富的 API 数据。这意味着,如果你的应用程序需要从不同的数据库读取数据,或者需要使用第三方服务提供的数据,GraphQL 可以帮助你整合这些数据,做到无缝访问。
最小化响应时间
GraphQL 是一种针对数据查询和传输优化的方式,客户端可以完全掌握请求的数据,从而避免了不必要的数据请求,最终提高响应时间。
灵活、可扩展和易于维护
GraphQL 是一种更加灵活、可扩展和易于维护的方式,开发人员可以更加自由地定义数据结构和数据操作方式,并在应用程序中轻松实现 GraphQL 的概念。
如何编写 GraphQL API
现在,让我们开始编写我们自己的 GraphQL API 吧!在这里,我们将使用 JavaScript 和 Express 来实现。
第一步:安装必要的软件包
我们需要安装以下软件包:
npm install express express-graphql graphql
第二步:定义类型系统
接下来,我们需要定义我们的类型系统。我们将定义两种类型:Author
和 Book
,它们用于描述作者和他们所著的书籍:
-- -------------------- ---- ------- ----- - ----------- - - ------------------- ----- ------ - ------------- ---- ------ - --- --- ----- ------ ------ ------ - ---- ---- - --- --- ----- ------ ------- ------ - ---
第三步:定义数据
我们需要定义一些数据,以便后面的 API 可以使用它们。这里,我们将使用一个简单的 JSON 数据:
-- -------------------- ---- ------- ----- ---- - - -------- - - --- -- ----- ----- --------- -- - --- -- ----- ------- --------- -- -- ------ - - --- -- ----- ------ ------ --- --- -------------- ------- --------- -- -- - --- -- ----- ---- --- -------- --------- -- -- -- --
第四步:定义查询
接下来,我们需要定义查询。我们将定义两个查询:一个查询我们的所有作者,另一个查询我们的所有书籍:
const root = { authors: () => data.authors, books: () => data.books, };
第五步:创建服务器
最后,我们可以创建服务器并启动它:
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- --- - ---------- ----- ---- - ----- ------------------- ------------- ------- ------- ---------- ----- --------- ----- ---- ---------------- -- -- - -------------------- ------ -- ------- -- ----------------------------------- ---
我们可以在浏览器中访问 http://localhost:4000/graphql
,然后使用以下查询获取数据:
-- -------------------- ---- ------- - ------- - -- ---- ----- - -- ---- - - ----- - -- ---- ------ - -- ---- - - -
示例代码
完整的代码可以在以下 Github 仓库中找到:
https://github.com/odashi/graphql-api-example
总结
GraphQL 提供了一个快速、灵活、可扩展和易于维护的方式来创建 API。它能够帮助开发人员构建更好的应用程序,并提供更好的用户体验。在构建自己的 GraphQL API 时,请记住要定义类型系统、数据和查询,并将它们组合成有效的 GraphQL 架构。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64edc8fdf6b2d6eab37f1320