GraphQL 是一种由 Facebook 开发的新型 API 查询语言和运行时环境，旨在改善现有 RESTful API 的局限性，提高开发效率和数据交互的灵活性。在这篇文章中，我们将深入了解 GraphQL 的概念和用法，从零开始创建一个 GraphQL 服务器，并编写示例代码来说明如何使用它。
什么是 GraphQL？
GraphQL 是一种请求数据的方式，可以从服务器端按需准确地获取所需的数据。它通过单一的端点定义了前端需要的所有数据，相较于传统的 RESTful API 更加灵活和可扩展，并能够有效地控制数据的大小和性质。同时，GraphQL 还提供了丰富的类型和查询语言，能够支持各种数据结构和操作，比如查询、修改、删除等等。总的来说，GraphQL 是一种更加优雅、高效和可靠的数据查询语言。
创建 GraphQL 服务器的步骤
1. 安装依赖
首先，我们需要在电脑上安装 Node.js 和一些 GraphQL 的相关依赖。您可以下载最新版本的 Node.js 并通过 npm 安装以下依赖：
$ npm install graphql express express-graphql
其中，graphql 是 GraphQL 的核心库，express 是 Node.js 服务器框架，express-graphql 是 GraphQL 在 express 中的中间件。
2. 构建 Schema
GraphQL 的核心是基于类型构建的查询语言，而所有的类型都需要在一个 Schema 中被定义。Schema 描述了我们的 API 的功能和数据模型，定义了如何查询和修改数据及其返回值。在我们开始编写 Schema 之前，让我们先引入我们的几个模型：
const {
GraphQLObjectType,
GraphQLString,
GraphQLList,
GraphQLNonNull,
GraphQLSchema,
} = require('graphql');这里我们引入了 GraphQL 的类型和 Schema 相关的一些对象，这些对象通常会在 Schema 的构建中使用。然后，我们先定义一个 Message 类型：
const MessageType = new GraphQLObjectType({
name: 'Message',
fields: () => ({
id: { type: GraphQLString },
text: { type: GraphQLString },
}),
});在这里，我们定义了一个 MessageType，它包含了一个 id 和一个 text，这些属性将会在我们的前端查询时被返回。接下来，我们可以定义我们的 RootQuery，这是我们的 Schema 的核心类型：
-- -------------------- ---- -------
----- --------- - --- -------------------
----- ----------------
------- -
-------- -
----- ------------
----- - --- - ----- ------------- - --
--------------- ----- -
-- ---- -- --- ---- ---- -------- ------
--
--
--
---这里我们定义了一个名为 message 的 Query，它返回一个 MessageType。它还接受一个参数 id，表示我们想查询哪个 id 的消息。在 resolve 函数中，我们可以写查询数据库或从其他源获取数据的代码。现在我们的 Schema 已经完成，让我们将其打包到一个 Schema 实例中：
const schema = new GraphQLSchema({
query: RootQuery,
});3. 编写 Resolver
Resolver 是执行 Query 中定义的函数，它们通常包含了从数据库或其他源获取数据的逻辑。在我们的例子中，我们编写一个简单的 resolver 函数，它返回所有消息。
-- -------------------- ---- ------- ----- -------- - - - --- ---- ----- ------- --------- -- - --- ---- ----- -------- -- --------- -- -- ----- ----------- - -- -- --------- ----- ---- - - --------- ------------ --
首先我们定义了一个包含两条消息的数组，然后编写了一个获取所有消息的函数 getMessages()，最后创建了一个名称为 messages 的查询根(也就是 resolver 中的 root)。接下来，我们需要将它们添加到 Server 中，让它们能够被执行。
4. 构建 GraphQL Server
最后一个步骤就是将 GraphQL Server 添加到 express 中。我们需要将 GraphQL Server 作为一个中间件添加到我们的服务器中。我们需要定义一个路径 (/graphql) 挂载 GraphQL，以及一个可选的执行方法。代码如下所示：
-- -------------------- ---- -------
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- --- - ----------
-- -- ------- ---
--------
-----------
-------------
-------
---------- -----
--------- -----
--
--
---------------- -- -- ------------------- -- --------------在这里，我们设置了一个 graphiql 参数，它允许我们在浏览器中进行交互式的 GraphQL 查询和测试。现在开启服务，我们就可以在浏览器的 http://localhost:5000/graphql 中看到 GraphQL 的 Playground 工具了。其中，左侧是 GraphiQL 功能区，我们可以在此输入 GraphQL 语句，右侧是结果窗口，我们可以看到我们所请求的数据。
示例代码
下面是一个完整的示例代码，它演示了如何创建一个 GraphQL Server。您可以将其复制到文件中并在本地运行。
-- -------------------- ---- -------
----- -
------------------
--------------
------------
---------------
--------------
- - -------------------
----- -------- - -
- --- ---- ----- ------- --------- --
- --- ---- ----- -------- -- --------- --
--
----- ----------- - --- -------------------
----- ----------
------- -- -- --
--- - ----- ------------- --
----- - ----- ------------- --
---
---
----- --------- - --- -------------------
----- ----------------
------- -
-------- -
----- ------------
----- - --- - ----- ------------- - --
--------------- ----- -
------ ------------------- -- ------ --- ---------
--
--
--------- -
----- --- -------------------------
--------------- ----- -
------ ---------
--
--
--
---
----- ------ - --- ---------------
------ ----------
---
----- ----------- - -- -- ---------
----- ---- - -
--------- ------------
--
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- --- - ----------
--------
-----------
-------------
-------
---------- -----
--------- -----
--
--
---------------- -- -- ------------------- -- --------------总结
在本文中，我们介绍了 GraphQL 的概念、优点和用法。我们也演示了如何使用 Node.js 和 express 加上 GraphQL 来创建一个服务器。我们通过一个示例代码，演示了如何构建和调用一个 GraphQL 服务器。相信了解了本篇文章，您可以更好的理解 GraphQL 的工作原理，从而加强对它的实际应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dde3a968c7c53b08adc77