GraphQL 是一种用于 API 的查询语言和运行时环境,最初由 Facebook 开发并在 2015 年公开发布。GraphQL 通过 API 定义类型和字段,然后允许客户端查询指定的字段,这使得客户和服务器之间的通信更加高效和灵活。
本文将介绍如何使用 GraphQL Server 构建一个 GraphQL API,包括 Schema、Resolvers 和 GraphQL Server。
一、搭建 GraphQL Server
首先,我们需要安装一些必要的软件:Node.js、NPM 和 GraphQL。
---- ------- ------- -- ------ --- --- ------- -------
接下来,我们创建一个新的目录,初始化一个空的 Node.js 项目,然后安装两个必要的依赖项,分别是 Express 和 Express GraphQL:
----- -------------- -- -------------- --- ---- -- --- ------- ------- ---------------
然后,我们在该项目下创建一个新的 index.js
文件,用于构建并运行 GraphQL Server。
----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- - ------------------ -------------- -------------- - - ------------------- ----- --- - ---------- ----- ------ - --- --------------- ------ --- ------------------- ----- ------------- ------- -- -- -- -------- - ----- -------------- -------- -- -- ------- -------- -- --- --- --- ------------------- ------------- ------- ------- --------- ----- ---- ---------------- -- -- - -------------------- ------ -- ------- -- -------------------------------- ---
现在,我们可以通过下面的命令来启动 GraphQL Server 了:
---- --------
访问 http://localhost:3000/graphql
,你会看到 GraphiQL 界面,用于测试我们创建的 GraphQL API。在 query
窗口中输入以下查询语句并执行:
- ------- -
你会得到以下的响应:
- ------- - ---------- ------- ------- - -
二、使用 Schema 和 Resolvers
上面的例子非常简单,只有一个字符串类型的 message
字段。现在,让我们增加一些更现实的数据和字段来理解使用 Schema 和 Resolvers 的方法。
1. 定义 Schema
我们将创建一个图书管理系统,其中包含两个类型:Book
和 Author
。定义如下:
----- -------- - --- ------------------- ----- ------- ------- -- -- -- --- - ----- ------------- -- ------ - ----- ------------- -- --------- - ----- ------------- -- --- --- ----- ---------- - --- ------------------- ----- --------- ------- -- -- -- --- - ----- ------------- -- ----- - ----- ------------- -- --- --- ----- ------------- - --- ------------------- ----- ------------ ------- -- -- -- ----- - ----- --------- ----- - --- - ----- ------------- -- -- -------- -------- ----- -- - -- ----- --- ---- ----- -- -- ------- - ----- ----------- ----- - --- - ----- ------------- -- -- -------- -------- ----- -- - -- ----- --- ---- ----- -- -- --- --- ----- ------ - --- --------------- ------ -------------- ---
上面的代码定义了两个类型:Book
和 Author
,以及一个根查询类型 RootQuery
,其中包含 book
和 author
两个字段。
2. 实现 Resolvers
现在,我们需要实现 Resolvers,以实现数据的获取和返回。
首先,我们需要定义一些书和作者的假数据:
----- ----- - - - --- ---- ------ ---- ----- -------- --------- --- -- - --- ---- ------ ---- ------- -- --- ----- --------- --- -- - --- ---- ------ --- ---- - ------------- --------- --- -- -- ----- ------- - - - --- ---- ----- --- ----- ----------- -- - --- ---- ----- --- -- --------- -- - --- ---- ----- ------- ---- -- --
然后,我们实现每个 Resolver 函数:
----- --------- - - ----- -------- ----- -- ----------------- -- ------- --- --------- ------- -------- ----- -- --------------------- -- --------- --- --------- --
最后,我们将其添加到 RootQueryType
中:
----- ------------- - --- ------------------- ----- ------------ ------- -- -- -- ----- - ----- --------- ----- - --- - ----- ------------- -- -- -------- --------------- -- ------- - ----- ----------- ----- - --- - ----- ------------- -- -- -------- ----------------- -- --- ---
现在,我们可以在 GraphiQL 中测试这些查询,例如:
- -------- ---- - -- ----- - -
响应:
- ------- - ------- - ----- ---- -------- ---- ----- ------- - - -
- ---------- ---- - -- ---- - -
响应:
- ------- - --------- - ----- ---- ------- --- ----- ----------- - - -
三、使用 GraphQL Server
现在,我们已经创建了一个 GraphQL API,包括 Schema 和 Resolvers。然而,如果我们想要在 JavaScript 应用程序中使用它,我们需要一个 GraphQl 服务器。我们可以使用 express-graphql
创建一个服务器。
首先,我们需要在 index.js
中添加以下代码:
----- --- - ---------- ------------------- ------------- ------- ---------- ---------- --------- ----- ----
现在,我们就可以在浏览器或其他应用程序中使用 GraphQL API 了。
现在,我们把所有的代码放在一起,供你参考:
----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- - ------------------ -------------- -------------- - - ------------------- ----- --- - ---------- ----- -------- - --- ------------------- ----- ------- ------- -- -- -- --- - ----- ------------- -- ------ - ----- ------------- -- --------- - ----- ------------- -- --- --- ----- ---------- - --- ------------------- ----- --------- ------- -- -- -- --- - ----- ------------- -- ----- - ----- ------------- -- --- --- ----- ----- - - - --- ---- ------ ---- ----- -------- --------- --- -- - --- ---- ------ ---- ------- -- --- ----- --------- --- -- - --- ---- ------ --- ---- - ------------- --------- --- -- -- ----- ------- - - - --- ---- ----- --- ----- ----------- -- - --- ---- ----- --- -- --------- -- - --- ---- ----- ------- ---- -- -- ----- --------- - - ----- -------- ----- -- ----------------- -- ------- --- --------- ------- -------- ----- -- --------------------- -- --------- --- --------- -- ----- ------------- - --- ------------------- ----- ------------ ------- -- -- -- ----- - ----- --------- ----- - --- - ----- ------------- -- -- -------- --------------- -- ------- - ----- ----------- ----- - --- - ----- ------------- -- -- -------- ----------------- -- --- --- ----- ------ - --- --------------- ------ -------------- --- ------------------- ------------- ------- ---------- ---------- --------- ----- ---- ---------------- -- -- - -------------------- ------ -- ------- -- -------------------------------- ---
结论
本文讲述了如何使用 GraphQL Server 构建一个 GraphQL API,包括 Schema、Resolvers 和 GraphQL Server。借助 GraphQL,我们可以使客户端查询指定的数据,从而使客户端和服务器之间的通信更加高效和灵活。GraphQL Server 是使用 GraphQL 的基本要素之一,它可以让我们使用语言无关的方式构建并提供 GraphQL API。使用 GraphQL,我们可以更容易地设计和构建应用程序的数据模型,从而更加灵活地响应客户端的需求。
来源:JavaScript中文网 ,转载请注明来源 本文地址:https://www.javascriptcn.com/post/66ffaf871b0bf82c71ce4d81