前言
随着互联网行业的飞速发展，前端技术日新月异，数据处理和管理也变得越来越庞大和复杂。为了更高效地处理数据和提高开发效率，我们采用 Koa2+GraphQL 的方式构建数据平台。
本教程将会详细介绍如何使用 Koa2+GraphQL 构建数据平台，包括环境搭建、GraphQL 的使用和实战案例。
环境搭建
安装 Node.js
首先需要在计算机上安装 Node.js。建议下载 LTS 版本，并根据所使用操作系统的不同，选择对应的版本进行下载和安装。
初始化项目
在命令行中进入所要创建的项目文件夹，执行以下命令：
npm init -y
然后我们可以通过以下命令来安装所需要的库：
npm install --save koa koa-router koa-bodyparser graphql graphql-tools apollo-server-koa nodemon
- koa：Koa2 框架；
- koa-router：路由功能；
- koa-bodyparser：解析请求体；
- graphql：GraphQL 库；
- graphql-tools：GraphQL 工具库；
- apollo-server-koa：Apollo GraphQL 服务；
- nodemon：自动重启 Node.js 应用
配置开发环境
可以在 package.json 中添加以下代码，配置项目的启动方式：
"scripts": {
"start": "nodemon app.js",
"build": "babel src --out-dir dist",
"test": "echo \"Error: no test specified\" && exit 1"
},在这里，“start”表示运行所编写的应用程序，可以通过以下命令启动：
npm start
“build”表示将 ES6 代码编译为 ES5 代码，使其能够被浏览器/服务器兼容。
GraphQL 的使用
Schema
在 GraphQL 中，Schema 是指定义查询和数据类型的结构。
下面是一个简单的 Schema 示例：
-- -------------------- ---- -------
----- - --- - - -----------------------------
----- -------- - ----
---- ----- -
------ ------
-
--
-------------- - ---------在上述示例中，定义了一个 Query 类型，它只有一个字段，即 hello，它是一个字符串类型。
Resolver
Resolver 是指解析查询请求并返回请求的数据类型。
下面是一个 Resolver 示例：
const resolvers = {
Query: {
hello: () => 'Hello World!'
}
}
module.exports = resolvers;在上述示例中，定义了一个 Query resolver，其返回值就是字符串“Hello World!”，用于响应查询 hello。
使用 Apollo Server
最后，在 app.js 中我们可以使用 Apollo Server 来启动 GraphQL 服务。
-- -------------------- ---- ------- ----- --- - --------------- ----- ---------- - -------------------------- ----- - ------------ - - ----------------------------- ----- -------- - ---------------------------- ----- --------- - ------------------------------- ----- ------ - --- -------------- --------- --------- --- ----- --- - --- ------ ---------------------- ------------------------ --- --- ----- ---- - ---------------- -- ----- ------------ ----- ---- -- -- -- ------------------- ----- -- ----------------------------------------------- --
在上述示例中，我们实例化 Apollo Server 对象并将其传递给 app.use() 函数。然后通过 app.listen() 函数启动应用程序。
现在我们成功地使用 Koa2+GraphQL 构建了一个基本的 GraphQL 示例。接下来，我们将通过“构建数据平台”的实例来演示如何使用它。
构建数据平台
准备工作
我们将使用 MongoDB 来存储数据。因此，我们首先要安装 MongoDB：https://www.mongodb.com/try/download/community
初始化项目
初始化项目并安装所需要的库。
安装 Mongoose
npm install --save mongoose
数据模型
在 Models 目录下，我们创建 user.js 文件。
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ---------- - ----------------- ----- - ----- ------- --------- ---- -- ------ - ----- ------- --------- ---- -- --------- - ----- ------- --------- ---- -- ---------- - ----- ----- -------- -------- - --- -------------- - ---------------------- ------------
在上述示例中，我们定义了 userSchema 模型，其中包含了用户的姓名、电子邮件、密码和注册时间。
MongoDB 配置
在根目录下创建 config 文件夹并添加 db.js 文件。
module.exports = {
db: 'mongodb://localhost:27017/<你的数据库名称>'
};将 <你的数据库名称> 替换为你的实际数据库名称。
使用 Mongoose 连接 MongoDB
在 app.js 中添加以下代码：
-- -------------------- ---- ------- ----- -------- - -------------------- ----- ---- - ----------------------- ------------------------- - ---------------- ---- --- ----- -- - -------------------- -------------- --------------------------- ----------- ---------- --------------- ---------- - ---------------------- -- ---------- ---
在上述示例中，我们使用 Mongoose 连接到 MongoDB 数据库，并使用数据库名称来配置连接字符串。一旦连接成功，我们将在控制台中看到“Connected to MongoDB”这一行输出。
GraphQL Resolvers 和 Mutations
在 graphql 目录下，我们将创建 resolvers.js 和 mutations.js 文件。
resolvers.js：
-- -------------------- ---- -------
----- ---- - --------------------------
----- --------- - -
------ -
------ ----- -- -- -
--- -
----- ----- - ----- ------------
------ ------
- ----- ----- -
-----------------
----- ----
-
-
--
--------- -
----------- ----- -------- ----- -------- ----- -- -
----- ---- - --- ------
----- ----------
------ -----------
--------- -------------
---
--- -
----- ------ - ----- ------------
------ -------
- ----- ----- -
-----------------
----- ----
-
--
----------- ----- -------- ----- -------- ----- -- -
----- - --- ------- - - -----
--- -
----- ------ - ----- -------------------------- ------
------ -------
- ----- ----- -
-----------------
----- ----
-
--
----------- ----- -------- ----- -------- ----- -- -
----- - -- - - -----
--- -
----- ------ - ----- ---------------------------
------ -------
- ----- ----- -
-----------------
----- ----
-
-
-
--
-------------- - ----------mutations.js：
-- -------------------- ---- -------
----- - --- - - -----------------------------
----- -------- - ----
---- ---- -
--- --
----- ------
------ ------
-
----- --------------- -
----- -------
------ -------
--------- -------
-
----- --------------- -
--- -------
----- ------
------ ------
--------- ------
-
---- ----- -
------ ------
-
---- -------- -
----------------- ------------------ ----
----------------- ------------------ ----
-------------- --------- ----
-
--
-------------- - ---------在上述代码中，我们定义了一个 User 类型，该类型包括 id、name 和 email 字段。然后定义了创建和更新用户的最小字段，以及删除用户所需的 id 字段。
我们还定义了一个 mutations.js，其中包含了一个 Query 和三个 Mutation，以提供对用户的创建、更新和删除的完整支持。
编写前端代码
我们可以使用 React 和 Apollo Client 来编写前端代码。
在项目根目录下，运行以下命令：
npx create-react-app client
然后，在 client/src/index.js 中，我们添加以下内容：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- -- ------- ------ ------ - ---- -------------------
------ - -------------- - ---- ----------------------
------ ------------ ---- ---------------
------ ---- ---- --------------------
------ ------- ---- -----------------------
------ -------- ---- ------------------------
------ --------------
----- ------ - --- --------------
---- -------------------------------
---
----------------
--------------- ----------------
--------
--------
------ ----- -------- ---------------- --
------ ----- ----------- ------------------- --
------ ----- ---------------- -------------------- --
---------
---------
------------------
-------------------------------
--在上面的代码中，我们通过 Apollo Provider 提供 Apollo Client。
现在我们可以开始为每个页面编写组件。
首先是 Home 组件。在 client/src/components 目录下创建 Home.js 文件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ---- - ---- -------------------
------ - --------- ----------- - ---- ----------------------
------ - --- - ---- ---------------
------ -------------
----- ----------- - ----
----- -
----- -
--
----
-----
-
-
--
----- -------------------- - ----
-------- --------------- -------- -
-------------- ---- -
----
-----
-
-
--
----- ---- - -- -- -
----- - -------- ------ ---- - - --------------------- - ------------- --- ---
----- ------------ - ----------------------------------
----- ------------ - ----- ---- -- -
----- -------- - ----------- --- ---- --- ---- -- ------ ---- --------
-- --------- --- ---- -- ---------------------- --- ------ -
--- -
----- ------ - ----- ------------ ---------- - -- - ---
--------------------
- ----- ------- -
-------------------
-
-
--
------ -
---- -----------------
--------------
----- --------- -------------------
--- ----
-------
-------- - -
-----------------
- - ----- - -
----------------------
- - -
-------
-------
----
-------------
--------------
---------------
-----
--------
-------
----------- --
--------------------- -- -
--- --------------
--------------------
---------------------
----
----- ---------------------- -------------------
----
-------
------- ------------------ ----------- -- -----------------------
------
---------
-----
-----
---
--------
--------
--
------
--
--
------ ------- -----在上述代码中，我们使用 useQuery 钩子来获取用户列表，以及 useMutation 钩子来删除用户。
然后，我们需要创建添 加用户和编辑用户的页面。在 client/src/components 目录下，创建 AddUser.js 和 EditUser.js 文件。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ---------- - ---- -------------------
------ - ----------- - ---- ----------------------
------ - --- - ---- ---------------
------ -------------
----- -------------------- - ----
-------- ----------------- -------- ------- -------- ---------- -------- -
----------------- - ----- ------ ------ ------- --------- --------- -- -
--
----
-----
-
-
--
----- -------------------- - ----
-------- --------------- -------- ------ ------- ------- ------- ---------- ------- -
----------------- - --- ---- ----- ------ ------ ------- --------- --------- -- -
--
----
-----
-
-
--
----- ---- - -- ------------ -- -- -
----- ------ -------- - -------------
----- ------- --------- - -------------
----- ---------- ------------ - -------------
------ -
----- ------------------------
---- ------------------
------ ----------------------------
------
-----------
---------
------------
------------- -- ------------------------
--------
--
------
---- ------------------
------ ------------------------------
------
------------
----------
-------------
------------- -- -------------------------
--------
--
------
---- ------------------
------ ------------------------------------
------
---------------
-------------
----------------
------------- -- ----------------------------
--------
--
------
---- --------------------
------- ----------------------------------
------
-------
--
--
----- ------- - -- -- -
----- ------- - -------------
----- ------------ - --------------------------------- -
------------ -- -- -
----------- ------- ---------------
------------------
-
---
----- ------------ - ----- --- -- -
-------------------
--- -
----- ------ - ----- ------------ ---------- - ----- ------ -------- - ---
--------------------
- ----- ------- -
-------------------
-
--
------ -
---- -----------------
------- ---------
----- --------------------------- --
------
--
--
------ ------- --------在上述代码中，我们定义了一个表单组件来接收用户输入，然后将其传递给 createUser Mutation 进行保存。
注意：在 client/src/components/Form.css 文件中，添加以下代码来为表单创建样式：
-- -------------------- ---- ------- ----- - ------ ----- ------- ----- -------- ----- - ------ - -------------- ----- - ----- - -------- ------------- -------------- ---- - ----- - -------- ------ ------ ----- -------- ----- ------- --- ----- ----- -------------- ---- ----------- ------------ ----- ------------ ---------- ----- ------------ - ----------- - -------- ----- ----------- - - - --- ------- ---- ---- ------ ------------- -------- - -------- - ----------- ----- ----------- ------ - ------ - -------- ------------- ----------------- -------- ------- ----- ------ ----- -------- ----- -------------- ---- ----------- ---------------- ----- ------------ ---------- ----- ------------ ------- -------- - ------------ - ----------------- -------- -
接下来是 EditUser.js 组件。它的代码与 AddUser.js 组件大致相同，只是它在 componentDidMount 钩子中调用了 useQuery 钩子，并将查询结果填充到表格中以供编辑。
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - ----------- --------- - ---- -------------------
------ - --------- ----------- - ---- ----------------------
------ - --- - ---- ---------------
------ -------------
----- ---------- - ----
----- --------- -------- -
-------- ---- -
--
----
-----
-
-
--
----- -------------------- - ----
-------- --------------- -------- ------ ------- ------- ------- ---------- ------- -
----------------- - --- ---- ----- ------ ------ ------- --------- --------- -- -
--
----
-----
-
-
--
----- ---- - -- ------------- ---- -- -- -
----- ------ -------- - ------------- -- -----------
----- ------- --------- - ------------- -- ------------
----- ---------- ------------ - -------------
------------ -- -
------------ -- -----------
------------- -- ------------
-- --------
------ -
----- ------------------------
---- ------------------
------ ----------------------------
------
-----------
---------
------------
------------- -- ------------------------
--------
--
------
---- ------------------
------ ------------------------------
------
------------
----------
-------------
------------- -- -------------------------
--------
--
------
---- ------------------
------ ------------------------------------
------
---------------
-------------
----------------
------------- -- ----------------------------
--
------
---- --------------------
------- ----------------------------------
------
-------
--
--
----- -------- - -- -- -
----- ------- - -------------
----- - -- - - ------------
----- - -------- ------ ---- - - -------------------- -
---------- - -- --
------------ ----------
---
----- ------------ - --------------------------------- -
------------ -- -- -
----------- ------- ---------------
------------------
-
---
----- ------------ - ----- --- -- -
-------------------
--- -
----- ------ - ----- ------------ ---------- - --- ----- ------ -------- - ---
--------------------
- ----- ------- -
-------------------
-
--
-- --------- ------ ------------------
-- ------- ------ -----------------------
------ -
---- -----------------
-------- ---------
----- --------------------------- ---------------- --
------
--
--
------ ------- ---------在 client/src/components 目录下，添加一个 Form.css 文件来为表单创建样式。。
启动应用程序
现在，我们已经创建了所有必需的组件和后端服务，我们可以在终端中运行以下命令来启动应用程序：
npm run start
在浏览器中打开 http://localhost:3000。用户列表应该出现在该页上。点击“添加用户”链接并输入用户信息，然后单击“提交”按钮。如果一切正常，返回目录，将显示刚添加的用户。
接着，我们可以编辑用户信息。单击编辑链接，更改用户信息后，单击“提交”按钮即可保存更改。
最后，我们还可以单击“删除”按钮来删除用户。
结论
在本教程中，我们详细介绍了如何使用 Koa2+GraphQL 构建数据平台。我们学习了如何使用 Mongoose 连接 MongoDB 数据库，并使用 Apollo Server 和 Apollo Client 来构建前后端之间的交互。最后，我们提供了一个完整的实例，该实例使用了 React 和 Apollo Client 来展示和管理用户数据。
我们希望这篇文章可以帮助您更好地理解 GraphQL 和 Koa2，以及如何使用它们来构建数据驱动的 Web 应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6774d1176d66e0f9aaf0b100