GraphQL 是一个由 Facebook 开发的查询语言和运行时环境，常用于前端应用程序中的数据获取。GraphQL 具有强大的可查询性和可组合性，同时也支持实时更新功能。本文将介绍 GraphQL 如何进行实时更新。
实时更新的概念和应用场景
实时更新是指前端应用程序可以接收到实时数据更新并立即进行展示，而不需要用户手动刷新页面。这种功能在许多应用场景下都是必不可少的。
例如，在一个聊天应用程序中，用户需要立即看到新消息的到来；在一个金融交易应用程序中，用户需要实时查看股票价格的变化。这些应用程序都需要实时更新功能来更好地满足用户需求。
GraphQL Subscription
GraphQL Subscription 是一个开放式协议，可用于实现实时更新功能。它通过使用 WebSocket 协议直接连接客户端和服务器，从而实现了实时的数据传输。
GraphQL Subscription 的基础结构类似于 GraphQL 查询和变更。但是，它添加了一个新的订阅类型，用于从服务器接收实时数据更新。
以下是一个示例 GraphQL Subscription：
-- -------------------- ---- -------
------------ -
---------- -
--
----
---------
---- -
--
----
-
-
-在上面的 Subscription 中，我们订阅了一个名为 newMessage 的事件，用于接收新消息的到来。每当有新消息时，服务器就会将其发送到客户端，并更新客户端的数据。
实现 GraphQL Subscription
为了实现 GraphQL Subscription，我们需要在服务器端和客户端分别进行设置。以下是一个基本的实现过程：
服务器端
第一步：添加 Subscription 类型
在 GraphQL Schema 中定义 Subscription 类型。例如：
type Subscription {
newMessage: Message!
}第二步：实现 Subscription Resolver
在 Resolver 中为 Subscription 添加实现。例如：
const Subscription = {
newMessage: {
subscribe: () => pubsub.asyncIterator([NEW_MESSAGE_TOPIC]),
},
};其中，pubsub 是一个可用于将新消息推送到客户端的发布/订阅库，NEW_MESSAGE_TOPIC 是一个常量，表示新消息的主题。
第三步：设置 WebSocket 连接
在服务器端启动 WebSocket 连接，并将其绑定到 Subscription Resolver 上。例如：
-- -------------------- ---- -------
----- ---------- - -----------------------
----- ------ - --- --------------
---------
----------
-------------- -
----- -----------------
--
-------- -- ---- --- -- -- --
----
----
-------
---
---
------------------------ --- ---
-----------------------------------------------
----------------------- -- -- -
------------------- ------- -- ---- ----------
---客户端
第一步：添加 WebSocket 客户端
在客户端中添加 WebSocket 客户端，以便与服务器建立连接。例如：
-- -------------------- ---- -------
------ - ------------- - ---- -----------------
------ - ----- - ---- --------------
------ - ----------------- - ---- -------------------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
----- ------ - --- ---------------
---- ---------------------------------------
-------- -
---------- -----
--
---
----- -------- - --- ----------
---- -----------------------------------
---
----- ---- - ------
-- ----- -- -- -
----- - ----- --------- - - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
---------
--
----- ----- - --- ----------------
----- ------ - --- --------------
-----
------
---在上面的代码中，我们使用了 WebSocketLink、HttpLink 和 split 三个链接来创建一个连接器。 split 用于鉴别传入的操作是否是 Subscription。
第二步：添加 Subscription 组件
在前端应用程序中添加 Subscription 组件，以便订阅服务器上的实时更新。
-- -------------------- ---- -------
------ - --------------- - ---- ----------------------
------ --- ---- --------------
----- ------------------------ - ----
------------ -
---------- -
--
----
---------
---- -
--
----
-
-
-
--
-------- ------------- -
----- - -------- ------ ---- - - ------------------------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------------------- -- -
---- -----------------
---------------------
--------------------------
------
---
-在上述代码中，我们使用 useSubscription 钩子从服务器上订阅了一个名为 NEW_MESSAGE_SUBSCRIPTION 的事件，并在更新时进行数据的展示。
总结
GraphQL Subscription 可用于实现前端应用程序中的实时更新功能。它通过使用 WebSocket 协议直接连接客户端和服务器，可以实现实时的数据更新。通过本文的介绍和示例代码，我们可以更好地理解和使用 GraphQL Subscription。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6450d15d980a9b385b9b80ed