在 GraphQL 中使用 GraphQL-Subscriptions 实现实时数据更新
什么是 GraphQL-Subscriptions?
GraphQL-Subscriptions 是一个用于实现 GraphQL 实时数据更新的库，它可以与任何支持 WebSocket 协议的客户端库搭配使用，如 GraphQL-JS、Apollo-Client 等。使用 GraphQL-Subscriptions 可以像使用 PubSub 一样，让客户端实时地订阅服务器端的数据更新。
如何使用 GraphQL-Subscriptions?
首先，我们需要创建一个用于保存订阅者的存储对象：
let subscriptions = {};然后，我们可以在 GraphQL 的 schema 中定义一个 Subscription 类型，用于订阅数据：
type Subscription {
postAdded: Post
}在 resolver 中定义订阅的操作，这里以一个添加文章的例子进行说明：
const subscriptionResolver = {
postAdded: {
subscribe: () => pubsub.asyncIterator("POST_ADDED"),
resolve: (payload) => {
return payload;
},
},
};在 subscribe 方法中，我们返回 pubsub 对象的一个 asyncIterator，这个方法会在有新文章添加时自动触发。在 resolve 方法中，我们返回最新添加的文章对象。
最后，我们需要将 Subscription 类型加入到 schema 中，并在服务器启动时创建 WebSocket 服务器：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - -------- --------- - ---- ----------
------ - ------------ - ---- -------
----- ------ - --- ---------------
------ ------
--------- ---------
------------- ------------- -- -- ------------ --
---
-- -----
----- ------ - ------------------
------------------- -- -- -
-- -- --------- ---
--- -------------------
-
--------
----------
-------
--
-
------- -------
----- -----------------
-
--
---现在，我们可以在客户端使用 WebSocket 客户端库来订阅数据更新，例如使用 Apollo-Client：
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ------------- - ---- -----------------
------ - ----- - ---- --------------
------ - ----------------- - ---- -------------------
------ - ------------- - ---- ------------------------
----- -------- - --- ---------- ---- ---------- --- -- ----------- - ------ - --- ---
----- ------ - --- ---------------
---- ---------------------------------------------
-------- -
---------- -----
--
---
----- ---- - ------
-- ----- -- -- -
----- - ----- --------- - - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
--------
--
----- ------ - --- --------------
-----
------ --- ----------------
---接着，我们可以在组件中使用 Apollo-Client 提供的 useSubscription Hook 来订阅数据：
-- -------------------- ---- -------
------ - --- - ---- ---------------
------ - --------------- - ---- ----------------------
----- ----------------------- - ----
------------ -
--------- -
--
-----
-------
-
-
--
-------- ---------- -
----- - ----- -------- ----- - - -----------------------------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
----
-------------------------- -- -
--- --------------
---------------------
---------------------
-----
---
-----
--
-现在，当服务器端有新文章添加时，客户端将自动订阅到最新数据更新并进行渲染。
总结
GraphQL-Subscriptions 是一个用于实现实时数据更新的库，可以与任何支持 WebSocket 协议的客户端库搭配使用。使用 GraphQL-Subscriptions 可以让客户端实时地订阅服务器端的数据更新，并可以像使用 PubSub 一样实现数据的实时更新。本文通过一个添加文章的例子详细地介绍了在 GraphQL 中使用 GraphQL-Subscriptions 实现实时数据更新的方法，并包含了示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b46060add4f0e0ffd4cd58