GraphQL 是一种新型的数据查询语言，它可以帮助前端开发人员更高效地获取和更新数据。结合 Node.js，我们可以构建实时的 Web 应用程序，提供更好的用户体验和性能。本文将介绍如何使用 GraphQL 和 Node.js 构建实时 Web 应用程序，并提供示例代码。
GraphQL 简介
GraphQL 是一种由 Facebook 开发的数据查询语言，它可以替代 RESTful API，并提供更高效的数据查询和更新。GraphQL 具有以下特点：
- 精确控制数据：GraphQL 允许开发人员精确地指定需要查询的数据，避免了 RESTful API 中的过度获取数据的问题。
- 自我描述：GraphQL 的查询语言具有自我描述的特点，可以让开发人员更好地理解和使用 API。
- 强类型：GraphQL 具有强类型的特点，可以在编译时发现错误，避免了运行时错误。
Node.js 简介
Node.js 是一种基于 JavaScript 的后端开发框架，它可以帮助开发人员构建高性能的 Web 应用程序。Node.js 具有以下特点：
- 高性能：Node.js 使用单线程的事件循环机制，可以处理大量的并发请求。
- 轻量级：Node.js 采用模块化的设计，可以方便地扩展和修改应用程序。
- 易于学习：Node.js 使用 JavaScript 作为开发语言，可以让前端开发人员更容易地学习和使用。
现在我们来使用 GraphQL 和 Node.js 构建一个实时 Web 应用程序，我们将使用以下技术：
- GraphQL-yoga：一个基于 Express 和 Apollo Server 的 GraphQL 服务器框架。
- Prisma：一个现代化的 ORM 框架，可以帮助开发人员更轻松地管理数据库。
- React：一个用于构建用户界面的 JavaScript 库。
步骤 1：创建 GraphQL 服务器
首先，我们需要创建一个 GraphQL 服务器，我们将使用 GraphQL-yoga 框架来创建服务器。首先，我们需要安装 GraphQL-yoga 和相关依赖：
npm i graphql-yoga graphql prisma-client-lib
接下来，我们需要创建一个 index.js 文件，并编写以下代码：
-- -------------------- ---- -------
----- - ------------- - - -----------------------
----- - ------ - - ----------------------------
----- -------- - -
---- ----- -
------ -------
-
-
----- --------- - -
------ -
------ -- -- ------ -------
-
-
----- ------ - --- --------
--------- -----------------------
--
----- ------ - --- ---------------
---------
----------
-------- -- -- --
------
--
--
--------------- -- ------------------- -- ------- -- ------------------------在上面的代码中，我们定义了一个简单的 Query 类型，用于返回字符串 Hello World!。我们还创建了一个 Prisma 实例，用于连接到数据库。
步骤 2：连接数据库
接下来，我们需要连接到数据库，我们将使用 Prisma 来连接数据库。首先，我们需要定义数据模型，我们将创建一个 User 模型，用于存储用户信息。创建 datamodel.prisma 文件，并编写以下代码：
type User {
id: ID! @unique
name: String!
email: String! @unique
}在上面的代码中，我们定义了一个 User 模型，包含 id、name 和 email 字段。我们使用 @unique 标记来保证 id 和 email 字段的唯一性。
接下来，我们需要使用以下命令来生成 Prisma 客户端代码：
npx prisma generate
然后，我们需要在 index.js 文件中导入生成的 Prisma 客户端代码：
const { GraphQLServer } = require('graphql-yoga')
const { Prisma } = require('./generated/prisma-client')接下来，我们需要修改 context 函数，将 Prisma 实例传递给上下文：
const server = new GraphQLServer({
typeDefs,
resolvers,
context: () => ({
prisma
})
})现在，我们已经成功连接到数据库了。
步骤 3：添加 GraphQL 查询
接下来，我们需要添加一些 GraphQL 查询，用于查询和更新数据。我们将添加以下查询：
users: 查询所有用户。user: 查询单个用户。createUser: 创建一个新用户。
首先，我们需要修改 typeDefs，添加上面的查询：
-- -------------------- ---- -------
----- -------- - -
---- ----- -
------ -------
------ --------
-------- ----- ----
-
---- -------- -
---------------- -------- ------ --------- -----
-
---- ---- -
--- ---
----- -------
------ -------
-
-在上面的代码中，我们定义了 Query 和 Mutation 类型，用于查询和更新数据。我们还定义了 User 类型，包含 id、name 和 email 字段。
接下来，我们需要修改 resolvers，实现上面的查询：
-- -------------------- ---- -------
----- --------- - -
------ -
------ -- -- ------ --------
------ ------ ----- -------- -- -----------------------
----- ------ - -- -- -------- -- --------------------- -- --
--
--------- -
----------- ------ - ----- ----- -- -------- -- ---------------------------
-----
-----
--
-
-在上面的代码中，我们使用 Prisma 客户端代码来实现查询和更新数据。
步骤 4：实现实时查询
现在，我们已经可以查询和更新数据了，接下来我们将实现实时查询，用于在数据更新时自动更新页面。我们将使用 GraphQL subscriptions 来实现实时查询。
首先，我们需要修改 typeDefs，添加以下 subscription：
-- -------------------- ---- -------
----- -------- - -
---- ----- -
------ -------
------ --------
-------- ----- ----
-
---- -------- -
---------------- -------- ------ --------- -----
-
---- ------------ -
------------ -----
-
---- ---- -
--- ---
----- -------
------ -------
-
-在上面的代码中，我们定义了 Subscription 类型，用于实现实时查询。我们还定义了 userCreated subscription，用于订阅用户创建事件。
接下来，我们需要修改 resolvers，实现 userCreated subscription：
-- -------------------- ---- -------
----- --------- - -
------ -
------ -- -- ------ --------
------ ------ ----- -------- -- -----------------------
----- ------ - -- -- -------- -- --------------------- -- --
--
--------- -
----------- ------ - ----- ----- -- -------- -- -
----- ---- - ---------------------------
-----
-----
--
------------------------------------- -
------------ ----
--
------ ----
-
--
------------- -
------------ -
---------- ------ ----- -------- -- -------------------------------------------
-
-
-在上面的代码中，我们使用 pubsub 对象实现 userCreated subscription。我们在 createUser mutation 中发布 userCreated 事件，然后在 Subscription 中订阅 userCreated 事件。
步骤 5：使用 React 构建用户界面
现在，我们已经可以查询和更新数据，并实现实时查询了，接下来我们将使用 React 构建用户界面。我们将使用 Apollo Client 来查询和更新数据，使用 React Apollo 来实现实时查询。
首先，我们需要安装以下依赖：
npm i apollo-boost react-apollo graphql-tag
接下来，我们需要创建一个 App.js 文件，并编写以下代码：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ----- - ---- --------------
------ --- ---- -------------
------ - ------------ - ---- --------------
----- --------- - ----
-
----- -
--
----
-----
-
-
-
----- ------------ - ----
------------ -
----------- -
--
----
-----
-
-
-
----- --- - -- -- -
-----
--------------
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ -----------------
-- ------- ------ -------- ------
------ ----------------- --- ----- ----- -- -- -
---- ---------
-------------
--------------
------
--
--
--------
------------- ----------------------------
--- ----- ------- -- -- -
-- --------- ------ ----
----- - ----------- - - ----
------ -
-----
------ ---- ------------
-------------------------
--------------------------
------
-
--
---------------
------
-
------ ------- ---在上面的代码中，我们使用 Query 组件查询所有用户，并使用 Subscription 组件订阅 userCreated 事件。我们将查询结果和订阅结果显示在页面上。
步骤 6：运行应用程序
现在，我们已经完成了所有的代码编写，接下来我们需要运行应用程序。首先，我们需要使用以下命令来启动 Prisma 服务：
npx prisma deploy
然后，我们需要使用以下命令来启动 GraphQL 服务器：
node index.js
最后，我们需要使用以下命令来启动 React 应用程序：
npm start
现在，我们可以在浏览器中访问 http://localhost:3000，查看应用程序的效果了。
结论
在本文中，我们介绍了如何使用 GraphQL 和 Node.js 构建实时 Web 应用程序。我们使用 GraphQL-yoga 和 Prisma 来构建 GraphQL 服务器，使用 React Apollo 来构建用户界面。通过本文的学习，读者可以掌握如何使用 GraphQL 和 Node.js 构建实时 Web 应用程序，并提供了示例代码供参考。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/673ffad65ade33eb7231ad69