GraphQL 是一种由 Facebook 开发的数据查询语言，它可以用于搭建 Web 应用的后端。与传统的 RESTful API 相比，GraphQL 更加灵活和高效，使得前端开发人员可以更加轻松地获取所需的数据。
在本文中，我们将指导您如何搭建一个基于 GraphQL 的 Web 应用。从概念到代码，我们将为您提供深入的指导和实用的示例。
GraphQL 的基本概念
GraphQL 有三个主要的基本概念：查询（Query）、变更（Mutation）和订阅（Subscription）。
- 查询（Query）：用于从服务器中获取数据的操作。类似于 RESTful API 的 GET 请求。
- 变更（Mutation）：用于在服务器上更改数据的操作。类似于 RESTful API 的 POST 请求。
- 订阅（Subscription）：用于接收服务器端观察对象（observable）的变更。
GraphQL 还有一些其他的概念，例如类型（Type）、接口（Interface）、枚举（Enum）等，这些概念可以用于定义数据模型和查询/变更的输入参数和返回值。
搭建基于 GraphQL 的后端
要搭建一个基于 GraphQL 的后端，您需要做以下几件事情：
- 安装必要的依赖：
在终端中输入以下命令来安装必要的依赖：
npm init npm install express express-graphql graphql
- 创建 GraphQL Schema：
在你的项目中创建 schema.js 文件，并使用 GraphQLSchema、GraphQLObjectType 和 GraphQLList 等类来定义数据模型。例如：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ------------------ -------------- ----------- ------------ ------------- - - --------
----- ---------- - --- -------------------
----- ---------
------- -- -- --
--- - ----- ------------- --
----- - ----- ------------- --
--
---
----- -------- - --- -------------------
----- -------
------- -- -- --
--- - ----- ------------- --
------ - ----- ------------- --
------- -
----- -----------
--------------- ------
-- ---- -- --- ------ ---- ---- -------- ----------
-
-
--
---
----- --------- - --- -------------------
----- ----------------
------- -
----- -
----- ---------
----- - --- - ----- ------------- - --
--------------- ------
-- ---- -- --- ---- ---- ---- -------- ----------
-
--
------- -
----- -----------
----- - --- - ----- ------------- - --
--------------- ------
-- ---- -- --- ------ ---- ---- -------- ----------
-
-
-
---
-------------- - --- ---------------
------ ----------
---- 创建 GraphQL Server：
创建 server.js 文件并使用 Express 和 express-graphql 将 schema.js 导入为中间件。例如：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- ------ - -------------------- ----- --- - ---------- ------------------- ------------- ------- --------- ----- ---- ---------------- -- -- - ---------------- --------- -- ---- ------- ---
- 运行 Web 服务器：
在终端中键入以下命令来启动 Web 服务器：
node server.js
基于 GraphQL 的前端开发
对于前端开发人员，GraphQL 提供了强大的 API 查询和调用功能。
您可以在浏览器中使用 GraphQL Playground 或 GraphiQL 等可视化界面来查询数据，也可以在代码中通过 fetch 或 axios 等 HTTP 客户端库来获取数据。
以下是一个利用 fetch 获取数据的示例代码：
-- -------------------- ---- -------
----------------- -
------- -------
-------- - --------------- ------------------ --
----- ----------------
------ -
----- -
-------- ---- -
-----
------ -
----
-
-
-
-
---
--
--------- -- -----------
--------- -- -----------------------在这个示例代码中，我们查询了一本书的标题和作者的姓名，并通过 fetch 方法将查询请求发送到了我们的 GraphQL 服务器。
总结
使用 GraphQL 搭建 Web 应用可以带来更高效和灵活的数据查询方式，使得前端开发人员可以更加轻松地获取所需的数据。
在本文中，我们向您介绍了 GraphQL 的基本概念和如何搭建基于 GraphQL 的后端和前端，希望能够为您的开发工作带来帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648e72c248841e9894ccee1f