随着前端技术的飞速发展，构建实时数据应用越来越成为了前端开发者的必备技能。而使用 NestJS 和 GraphQL 结合的方式，可以让我们轻松地构建出高效、可扩展的实时数据应用，本文将会详细介绍如何使用这两个工具进行构建。
什么是 NestJS
NestJS 是一个基于 TypeScript 的渐进式 Node.js 框架，它可以帮助我们快速地构建出高效、可扩展的应用，特别是在构建 API 或微服务方面，NestJS 的优势更加明显。
相比较于其他 Node.js 框架，NestJS 做了一些特别的事情：
- 它提供了一种优雅、清晰的架构方式，称之为 Modules、Controllers 和 Services；
- 它拥抱 TypeScript，使用 TypeScript 和 NestJS 可以带来更好的类型安全和代码可读性；
- 它内置了很多常用库的支持，比如 TypeORM、Mongoose 等。
什么是 GraphQL
GraphQL 是一种用于 API 构建的查询语言，它可以让我们更加灵活地向后端请求需要的数据，并且减少网络请求的次数，从而提升应用的性能。
与传统的 RESTful API 相比，GraphQL 的主要优势在于：
- 它可以让前端更灵活地请求需要的数据，而不是像 RESTful API 一样只能请求整个资源；
- 它可以根据自己的需求组装出需要的数据，是一种更加自由的查询方式；
- 使用 GraphQL 可以减少网络请求的次数，这对于移动设备的网络带宽和电量来说是非常有帮助的。
NestJS + GraphQL 实现实时数据应用
在使用 NestJS 和 GraphQL 实现实时数据应用的时候，我们需要使用两个库：@nestjs/graphql 和 graphql-subscriptions。
@nestjs/graphql 提供了一些用于构建 GraphQL API 的装饰器和类，它会在我们定义的 Resolver 中自动生成 GraphQL Schema。
graphql-subscriptions 则是用于实现订阅和发布功能的 GraphQL 插件，它可以让我们轻松地实现实时数据应用中最核心的功能。
下面我们来看一下如何在 NestJS 中使用 GraphQL 和 graphql-subscriptions。
1. 安装依赖
首先我们需要安装一些依赖：
npm install @nestjs/graphql graphql graphql-subscriptions
2. 设置 GraphQL Module
我们需要先在 NestJS 应用中设置 GraphQL Module，这一步中我们需要传入一个 Schema 和一些配置项。
-- -------------------- ---- -------
------ - ------ - ---- -----------------
------ - ------------- - ---- ------------------
------ - ---- - ---- -------
------ - ------ - ---- ------------------------
------ - ----------- - ---- -----------------
---------
-------- -
----------------------------
----------- -- -- --
--------------- ------------------- ------------------ -- ---- ------ --
----- -----
----------- -----
---------------------------- ----- -- -- ------------ --
---
---
--
---------- ------------- --------
--
------ ----- --------- --上面代码中的 AppResolver 是我们定义的 Resolver，它将会用于处理 GraphQL 中的查询和订阅。
PubSub 是 graphql-subscriptions 中用于实现订阅和发布的类，我们需要将它注入到 NestJS 的 DI 系统中，这样就可以在任何地方使用它来发布或监听事件了。
3. 创建 Resolver
下面我们来定义一个简单的 Resolver：
-- -------------------- ---- -------
------ - ------ --------- ------------ - ---- ------------------
------ - ------ - ---- -----------------
------ - ------ - ---- ------------------------
-----------
------ ----- ----------- -
----------------------------- ------- ------- ------- --
--------- -- -------
------- -
------ ------ --------
-
---------------- -- ------- -
----- --------------------
------- ------- -- ------------------------------------
--
------------------- -
------ -----------------------------------
-
---------------- -- ------- -
----- ----------
--
--------- -
--- ----- - --
-------------- -- -
------------------------------ - -------- ------- ---
-- ------
------ -------------------------------------
-
-AppResolver 中定义了两个订阅方法和一个查询方法：
helloSubscription：这是一个简单的订阅方法，它会监听hello的事件并返回事件的负载；counter：这是一个更加复杂的订阅方法，它使用了setInterval来模拟一个定时器，并使用this.pubSub.publish发布数据，然后返回事件的负载；hello：这是一个简单的查询方法，它返回Hello World!字符串。
上面的代码中，我们使用了 @Subscription 装饰器来定义订阅方法，这个装饰器会为我们自动创建一个 GraphQL Subscription Field，然后我们只需要在方法中返回一个 AsyncIterator 即可。
AsyncIterator 是 graphql-subscriptions 中用于实现订阅和发布的类，它具有迭代器的特性，可以不断地返回事件的负载。
4. 创建客户端
最后我们创建一个客户端来连接到我们的 NestJS 应用中，这里我们使用了 Apollo Client：
-- -------------------- ---- -------
------ - ------------- --------- -------------- ----- - ---- -----------------
------ - ----------------- - ---- ---------------------------
------ - ------------- - ---- -------------------------
----- -------- - --- ----------
---- --------------------------------
---
----- ------ - --- ---------------
---- ------------------------------
-------- -
---------- -----
--
---
----- --------- - ------
-- ----- -- -- -
----- - ----- --------- - - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
---------
--
------ ----- ------ - --- --------------
----- ----------
------ --- ----------------
---客户端中最核心的部分就是 WebSocketLink，它用来创建 WebSocket 连接，从而实现客户端与服务器之间的实时数据通信。
NestJS + GraphQL 实现实时数据应用的示例代码：Github
总结
使用 NestJS 和 GraphQL 结合可以让我们轻松地构建出高效，可扩展的实时数据应用，这对于我们在工作中构建现代 Web 应用非常有帮助。希望这篇文章对你有所启发，如果你有任何问题或想法，请留言让我知道。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645e2a82968c7c53b0090071