GraphQL 是一个先进的 API 查询语言和运行时，它可以让开发者按需获取并组合他们需要的数据。GraphQL 的优势在于可以大大减少数据传输的冗余，提升 API 的性能和用户体验。但是传统的 GraphQL API 只能查询，不能订阅。为了解决这个痛点，GraphQL 新增了订阅操作，让开发者可以订阅数据的变化，实时获取最新的数据。
1. 订阅操作简介
GraphQL 的订阅操作是一种非常新颖的操作，它允许开发者可以订阅一个数据源的变化，并且在数据源发生变化时，能够及时地推送数据到客户端。这种操作非常适合于实时数据的场景，如实时聊天、在线协作等。
GraphQL 订阅操作的语法如下：
------------ -
---------------------- ------- ----- ---- -
------
------
- ---
-
-上述语法中，subscription 关键字指定了这是一个订阅操作。subscriptionName 是订阅的名称，可以带上参数。field1、field2 是订阅的字段。
2. 如何实现订阅操作？
GraphQL 的订阅操作可以通过一些库或框架来实现。本文将以 Apollo Server 为例来演示如何实现 GraphQL 的订阅操作。
2.1 安装 Apollo Server
--- - -------------
2.2 创建 Apollo Server
----- - ------------- --- - - ------------------------
----- -------- - ----
---- ----- -
------ ------
-
---- ------------ -
-------- ------
-
-
----- --------- - -
------ -
------ -- -- ------ ------
--
------------- -
-------- -
---------- -- -- -
-- ----- ------
-
-
-
-
----- ------ - --- --------------
---------
---------
--
----------------------- --- -- -- -
--------------- ------ ----- -- --------
--以上代码中定义了一个 Query 类型，其中包含一个 hello 字段，它的值为字符串 "Hello World"。同时定义了一个 Subscription 类型，其中包含一个 message 字段，它可以被订阅。
在 resolvers 中实现了 hello 字段的解析方法，它会返回一个字符串。在 resolvers 中还实现了 message 字段的 subscribe 方法，该方法会返回一个可观察对象。
2.3 实现订阅逻辑
在 Subscription 类型中定义的 message 字段，需要有一个 subscribe 函数来处理订阅逻辑。该函数需要返回一个可观察对象，用于推送数据。
在 Apollo Server 中，我们可以使用 PubSub 类来实现订阅逻辑。PubSub 是一个发布订阅模式的实现类，它能够和 GraphQL 的订阅操作很好地集成在一起。
----- - ------------- ---- ------ - - ------------------------
----- ------ - --- --------
----- --------- - -
------------- -
-------- -
---------- -- -- -----------------------------------
-
--
--------- -
------------ --- - ------- -- -- -
----------------------------- - ------- --
------ ----
-
-
-上面代码中，在 GraphQL Schema 中定义了一个 Mutation 类型，并实现了一个 postMessage 字段。当 postMessage 字段被调用时，它会调用 pubsub.publish 方法，该方法会发送一条消息给所有订阅了 NEW_MESSAGE 主题的客户端。
在 Subscription 类型中，我们使用 apollo-server 中提供的 asyncIterator 方法来返回一个可观察对象，该对象会监听 NEW_MESSAGE 主题的变化，一旦有新的消息到来，就会将消息推送给客户端。
2.4 订阅操作的实现及使用
我们使用 apollo-server 提供的工具 graphql-ws 来实现订阅操作的推送功能。
----- - ------------ - - ------------------------
----- - -------- --------- - - ------------------
----- - ------------ - - ---------------
----- - ------------------ - - -------------------------------------
----- ------ - --- -------------- -- --- -- --
----------------------- --- -- -- -
--------------- ------ ----- -- --------
--------------------------
-
--------
----------
------- --------------
--
-
------- -----------------------------------------
----- -------------------
-
-
--使用 SubscriptionServer.create 方法创建一个订阅服务，该服务将 GraphQL 的执行和订阅设置成 WebSocket 的方式。
在客户端中，我们可以使用 subscriptions-transport-ws 工具来实现订阅操作的传输。
------ - ------------------ - ---- ----------------------------
------ --- ---- -------------
----- ------------------ - --- ------------------------------------------------- -
---------- ----
--
------------------------------
------ ----
------------ -
-------
-
--
---------- ---
-------------- ---------
--------------
----- ------ -- ------------------
------ ------- -- --------------------
--以上代码实现了一个 message 字段的订阅操作，并输出了它的数据内容。客户端连接到 ws://localhost:4000/graphql 的 WebSocket 服务器，发送订阅请求，并通过 subscription.next(callback) 来接收数据。
3. 总结
从本文中我们了解到 GraphQL 的订阅操作是一种有效地提供实时数据的方法，使用 Apollo Server 和 PubSub 类我们可以很方便地实现订阅操作。如果你正在构建一个需要实时数据的应用，那么 GraphQL 的订阅操作是一个非常好的选择。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/653718087d4982a6ebf6db4d