GraphQL 是一种用于 API 的查询语言和运行时。 它提供了一种在客户端指定需要的数据的方式，而不是从服务端返回固定结构的响应。GraphQL 还提供了一组强大的工具来调试和优化查询，其中包括一个称为 Subscription 的新功能。 本文将介绍 GraphQL 的 Subscription 功能，探索它的特性，以及如何在前端应用程序中使用它。
Subscription 是什么？
Subscription 是一种 GraphQL 操作类型，它允许客户端订阅服务器上的事件并持续接收变更。与传统的查询和变更操作不同，Subscription 将允许实时更新客户端。例如，在聊天应用程序中，用户可以使用 Subscription 订阅聊天室中的新消息，而不必主动轮询服务器。
Subscription 的工作方式
Subscription 类似于 GraphQL 的查询和变更操作，但在客户端和服务器之间交换的是一个 WebSocket 连接。客户端发起订阅并接收更新，直到它主动取消订阅或销毁 WebSocket 连接。服务器保持 WebSocket 连接开放状态并向订阅者推送更新。
订阅的定义与查询和变更操作的定义类似。订阅操作与查询和变更操作都包含字段选择集，由客户端指定要接收的更新。例如，我们的 Subscription 类型可以定义如下：
type Subscription {
newMessage(roomId: String!): Message!
}这段定义表示，客户端可以订阅 newMessage 事件，并在任何给定的聊天室（由 roomId 参数引用）中接收新消息。当订阅成功时，服务器将返回 Message 类型的值。
接下来是 Subscription 的一个示例订阅和更新示例：
-- -------------------- ---- -------
------------ -
------------------ ------ -
--
----
------ -
--
----
-
-
-这段代码请求订阅在聊天室 123 中发布的新消息，并在这些消息发布时返回 id、text 以及发送者的 id 和 name。
在前端应用程序中使用 Subscription
在前端应用程序中使用 Subscription 的具体步骤取决于您在实现 GraphQL 客户端所使用的库。不过，无论您选择的是哪种工具，您都需要执行以下步骤：
- 建立 WebSocket 连接：在 Subscription 开始之前，客户端需要建立一个 WebSocket 连接。通常，您可以使用库的默认设置，但也可以根据需要自定义 WebSocket 配置。
import { SubscriptionClient } from 'subscriptions-transport-ws';
const subscriptionClient = new SubscriptionClient('wss://websocket-url', {
reconnect: true,
});- 创建 Subscription 对象：您需要使用 GraphQL 客户端的工具来构造 Subscription 对象。这个过程中包括定义 Subscription 的类型以及与服务器交互的 WebSocket 连接。
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ - ------------------ - ---- -----------------------------
------ - ------------- - ---- -------------------------
----- ------------------ - --- ----------------------------------------- -
---------- -----
---
----- ---------------- - --- ----------------------------------
----- ------------------------ - ----
------------ ------------------- -------- -
------------------ -------- -
--
----
------ -
--
----
-
-
-
--在这个例子中，我们使用 @apollo/client 库来创建 Subscription 对象。我们根据先前定义的 Subscription 定义 NEW_MESSAGE_SUBSCRIPTION，并使用 WebSocketLink 连接到 WebSocket 服务器。
- 订阅更新：最后，我们将 Subscription 对象传递给 GraphQL 客户端，执行订阅操作并处理返回的更新。
-- -------------------- ---- -------
------ - --- - ---- -----------------
------ - ------------------ - ---- -----------------------------
------ - ------------- - ---- -------------------------
----- ------------------ - --- ----------------------------------------- -
---------- -----
---
----- ---------------- - --- ----------------------------------
----- ------------------------ - ----
------------ ------------------- -------- -
------------------ -------- -
--
----
------ -
--
----
-
-
-
--
------
------------
------ -------------------------
---------- -
------- ------
--
--
------------
---------- -
--------------------- ----- -- ------
--
---------- -
-------------------- --------- -- -----
--
---在这个例子中，我们使用 client.subscribe 方法订阅一个 NEW_MESSAGE_SUBSCRIPTION，并在每次收到更新时打印每个更新。
结论
GraphQL 的 Subscription 功能为 Web 应用程序提供了实时更新的功能，而无需轮询服务器。不管您构建的应用程序类型是什么，Subscription 都将成为理想的工具，为您提供实时更新数据的可能性。希望这篇文章对您有所指导和启示，让您更好地理解 Subscription，并掌握如何使用它。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6710a3e6377015f5a1a1dd88