GraphQL 是一种用于 API 开发的查询语言和运行时。它的高度可扩展性和灵活性允许开发人员以前所未有的方式构建 API。
在 GraphQL 中，Subscriptions 可以帮助开发人员实现实时数据更新。本文将详细讲解 Subscriptions 的用法和实现方式，并提供相关示例代码，指导读者如何在 GraphQL 中使用 Subscriptions 实现实时数据更新。
什么是 Subscriptions？
Subscriptions 是一种订阅机制，它使得开发人员可以通过一个 WebSocket 连接来订阅和接收服务端的数据更新。当有新的数据可用时，服务器会将数据发送给客户端。这种机制类似于观察者模式，可以使得客户端实时地更新 UI 界面，同时更新所有相关的数据。
如何在 GraphQL 中使用 Subscriptions？
使用 Subscriptions 时，首先需要在 GraphQL 服务中定义一个 Subscription 类型，这个类型通常包含一个订阅器。
type Subscription {
newMessage: Message!
}然后，需要在服务端中实现订阅器的行为，代码示例如下：
-- -------------------- ---- -------
----- - ------ - - ------------------------
----- ------ - --- --------
----- --------------- - -----------------
----- --------- - -
------------- -
----------- -
---------- -- -- ----------------------------------------
--
--
--------- -
-------------- ----- -------- ----- - --- ------ -- -- -
----- ------- - ----- -----------------------
--------
------- ------
--
------------------------------- - ----------- ------- --
------ -------
--
--
-
-------------- - ---------以上代码使用了 Apollo Server 提供的 PubSub 类，用于管理订阅机制的所有操作。它会在创建消息时发布一个新的 MESSAGE_CREATED 事件，并将消息的新状态通过订阅器发送到客户端。
在客户端中，我们使用 Apollo Client 来订阅 newMessage 事件，并在收到新消息时执行相应的操作。
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ - ---------------- --- - ---- ----------------
----- -------------------- - ----
------------ -
---------- -
--
----
---- -
--------
-
-
-
-
-------- ---------- -
----- - ----- -------- ----- - - -------------------------------------
------------ -- -
-----------------
-- -------
-- --------- ------ -----------------
-- ------- ------ ------------
------ ---------------------- --- ----- ---- -- -- -
---- ---------
-------------
------ --------------------
------
--
-
------ ------- --------以上代码会在组件渲染时订阅 MESSAGE_SUBSCRIPTION，并在收到新消息时打印消息内容到控制台。在组件卸载时，订阅将自动取消。
总结
通过 Subscriptions，我们可以实现在 GraphQL 中实时更新数据的功能，这使得开发人员可以构建更加流畅和自然的应用程序。掌握 Subscriptions 的用法将提高开发人员的 GraphQL 技能，同时在开发现代 Web 应用程序时也会非常有帮助。
在此篇文章中，我们详细讲解了 Subscriptions 的用法和实现方式，同时提供相关的示例代码和指导意义，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646da58a968c7c53b0c4a0a6