前言
在传统的 RESTful API 中,每个资源都需要自己的 URL,这使得对多个资源进行查询和处理变得繁琐。GraphQL 是一种新的 API 设计方式,它通过一张概述了整个系统的图表(Schema),允许客户端指定需要的数据并返回精确的结果。本文将会详细地介绍 GraphQL 的基本概念、语法和使用方法,最后给出一个 GraphQL API 的示例和说明。
GraphQL 的基本概念
Schema
在 GraphQL 中,Schema 是整个 API 的核心。它定义了服务器上可以进行的所有操作和可用的查询字段。Schema 的属性包括 Query、Mutation 和 Subscription。
- Query:查询属性,用于获取数据。
- Mutation:更改属性,用于更新数据。
- Subscription:订阅属性,用于实时通知客户端关心的事件。
Type
GraphQL 中有两种类型:标量类型和对象类型。标量类型是表示单个值的 GraphQL 类型,例如字符串、整数和布尔值。对象类型是表示多个值的 GraphQL 类型,例如用户或博客文章。
Resolver
Resolver 是用于定义查询的函数,它返回与查询匹配的数据。
Resolver 的数据源可以是任何内容,包括数据库、API 和 Web 服务。Resolver 应该返回与查询匹配的数据,并在必要时进行查询以获取所需的数据。
GraphQL 的语法
查询
GraphQL 中的查询由以下三个部分组成:
----- - ----- -
- query:关键字,表示我们要进行的查询操作。
- {}:用于包含实际查询部分的花括号。
- field:要查询的内容。
例如:
----- - ---------- -- - ---- --- - -
上面的查询会从服务器上获取 ID 为 1 的作者的姓名和年龄。
变量
如果查询需要动态参数,则需要使用变量。变量由美元符号($)和名称组成,并用作查询参数的值。
例如:
---------------- ----- - ---------- ---------- - ---- --- - -
上面的查询使用了名为 $authorId
的变量,它的类型为整数。注意,变量后面的感叹号表示该变量是必需的。
调用该查询时需要提供一个包含变量的 JSON 对象,例如:
- ----------- - -
Mutation
Mutation 是在 GraphQL 中用于更改数据的操作。Mutation 与查询语法类似,由以下三个部分组成:
-------- - ----- -
例如:
-------- - ------------------ -------- ---- --- - -- ---- --- - -
上面的 Mutation 将会创建一个名为 Alice、年龄为 25 的作者并返回 ID、姓名和年龄。
GraphQL 的使用方法
安装
首先需要安装 GraphQL 的依赖包。可以使用 npm 命令进行安装:
--- ------- ------- ------------- ------- ----------- ----
构建 Schema
在 GraphQL 中,Schema 定义了数据类型和查询解析器。我们可以在一个 Schema 中定义多个类型,这个例子中我们定义了两个类型:Author 和 Book。
----- - -------------------- - - ------------------------- ----- -------- - - ---- ------ - --- --- ----- ------ ---- --- ------ ------ - ---- ---- - --- --- ------ ------ ------- ------ - ---- ----- - ---------- ----- ------ -------- ----- ---- ------ ------ - ---- -------- - ------------------ -------- ---- ------ ------ ----------------- -------- --------- ----- ---- - -- ----- --------- - - ------ - ------- --- - -- -- -- ------------------- -- --------- --- ---- ----- --- - -- -- -- --------------- -- ------- --- ---- ------ -- -- ------ -- --------- - ------------- --- - ----- --- -- -- - ----- ------ - - --- --------- ----- ---- ------ -- -- --------------------- ------ ------- -- ----------- --- - ------ -------- -- -- - ----- ------ - ------------------- -- --------- --- ---------- -- --------- ----- --- ------------- ---- -- ------------- --- -------- ----- ---- - - --- --------- ------ ------ -- ----------------- ------------------------ ------ ----- -- -- ----- - ------- ---- -- ------------------- -- --------- --- --------------- -- ------- - ------ ------ -- ----------------- -- ------------- --- ----------- -- -- ----- ------ - ---------------------- --------- ---------- ---
启动 Server
使用 Express 搭建一个 HTTP Server:
----- ------- - ------------------- ----- ---------- - ----------------------- ----- - --------------- --------------- - - ---------------------------------- ----- ---- - ---------------- ---------------- ------------------- ------------------ ---------------- ------ ---- -------------------- ----------------- ------------ ---------- ---- ---------------- -- -- - ------------------- ------- -- -------------------------------- ---
测试
在浏览器中访问 http://localhost:4000/graphql
或 http://localhost:4000/graphiql
后输入以下查询和变量:
查询:
----- - ----- - -- ----- ------ - ---- - - ---------- ---- - ---- --- ----- - ----- - - -
变量:
- ----------- ---- -------- -------- -------- ----------- -
Mutation:
-------- - ------------------ -------- ---- --- - -- ---- --- - -
本文总结
通过本文的介绍,我们了解了 GraphQL 的基本概念、语法和使用方法。我们也看到了 GraphQL 是如何帮助我们构建无缝的 API,并提供更好的数据查询和处理能力。
下一步,我们可以探索更多 GraphQL 的高级特性,例如 Subscription 和 Schema 语法高级用法,以构建更强大的 API。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/647e9a6448841e9894e4cd4d