GraphQL 是一个由 Facebook 开源的数据查询和操作语言，旨在提供一种更高效、强大、灵活和简单的替代 REST API 的方案。它可以让前端开发者更加方便地获取数据，并且可以同时获得多个数据源的数据，因此在前端领域越来越受到欢迎。本文将介绍如何在 Node.js 中使用 GraphQL，以及如何通过 GraphQL 简化前端开发流程。
安装和配置
在使用 GraphQL 之前，需要安装生成器和 GraphQL 相关的库。可以通过以下命令来进行安装：
npm install graphql graphql-yoga apollo-server-express express express-graphql graphql-type-json
其中，graphql 是 GraphQL 的 JavaScript 实现，graphql-yoga 是基于 Express 的 GraphQL 服务器，apollo-server-express 是另一个流行的 GraphQL 实现，express-graphql 是 Express 的中间件实现，graphql-type-json 可以处理 JSON 数据。
创建数据源
首先，需要创建数据源。可以使用任何数据源，例如 MySQL、MongoDB 或一个简单的 JSON 文件。在下面的示例中，我们将使用一个简单的 JSON 文件，其中包含一个任务清单：
-- -------------------- ---- -------
-
-------- -
-
----- ----
-------------- ---- ----------
--
-
----- ----
-------------- ----- --- ----
--
-
----- ----
-------------- ------ --- ------
-
-
-定义 GraphQL 模式
GraphQL 有自己的数据模式定义语言，称为 GraphQL Schema Definition Language。通过它，可以定义数据的类型、字段和关联性。下面是一个简单的示例，定义了一个任务类型：
type Task {
id: ID
description: String
}
type Query {
tasks: [Task]
}在上面的示例中，定义了一个名为 Task 的对象类型，它具有两个字段：id 和 description。然后，创建了一个名为 Query 的根对象类型，它具有一个类型为 [Task] 的 tasks 字段。
创建 GraphQL 服务器
在创建 GraphQL 服务器之前，需要确保有一个 HTTP 服务器。可以使用 Express 或任何其他 HTTP 服务器。下面是使用 Express 创建 GraphQL 服务器的示例代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- - ----------- - - --------------------------- ----- ------ - -------------------- ----- ---- - ----------------------- ----- --- - ---------- ------------------- ------------- ------- ------- ---------- ----- --------- ----- ---- ---------------- -- -- - -------------------- - ------- --- ------ -- -------------------------------- ---
在上述代码中，首先引入 Express 和 GraphQL 相关的库。然后，引入数据源和上一步中定义的模式。接着，使用 graphqlHTTP 中间件创建 GraphQL 服务器。在 graphqlHTTP 中间件的选项中，指定了 GraphQL 的模式、数据源和 GraphiQL 显示。
执行 GraphQL 查询
现在，可以在浏览器中打开 http://localhost:4000/graphql 地址，使用 GraphiQL 来进行查询。GraphiQL 是一个 IDE，可以方便地通过 HTTP API 进行查询和操作。
下面是用于检索所有任务清单的查询示例：
query {
tasks {
id
description
}
}然后，可以得到以下结果：
-- -------------------- ---- -------
-
------- -
-------- -
-
----- ----
-------------- ---- ----------
--
-
----- ----
-------------- ----- --- ----
--
-
----- ----
-------------- ------ --- ------
-
-
-
-添加 GraphQL 变异
除了查询之外，GraphQL 还支持变异。变异允许修改数据源中的数据。下面是一个简单的示例，用于向任务清单中添加新任务：
mutation {
createTask(description: "Take out the trash") {
id
description
}
}然后，可以通过以下结果验证任务是否已成功添加：
{
"data": {
"createTask": {
"id": "4",
"description": "Take out the trash"
}
}
}总结
在本文中，我们介绍了如何在 Node.js 中使用 GraphQL，以及如何使用 GraphQL 简化前端开发流程。我们讨论了如何安装和配置 GraphQL 相关库，如何创建数据源和定义 GraphQL 模式，以及如何使用 GraphQL 服务器和执行 GraphQL 查询和变异。正如我们所看到的，GraphQL 可以让前端开发者更加方便地获取数据，并且可以同时获得多个数据源的数据。借助 GraphQL 的强大功能，可以实现更加灵活和高效的前端应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64770a3b968c7c53b039c02c