在传统的前端开发中，我们通常使用 Ajax 或者 WebSocket 来实现实时数据推送。但是这些技术存在一些问题，比如 Ajax 需要手动轮询服务器，WebSocket 可能存在连接断开等问题。
GraphQL 的 Subscription 解决了这些问题，它可以实现实时数据推送，并且可以在连接断开后自动重连。本文将介绍 GraphQL 的 Subscription 的使用方法，并且提供一个示例代码。
Subscription 是什么？
在 GraphQL 中，Subscription 是一种用于实时数据推送的操作。它类似于查询和变异，但是它不是一次性的，而是可以持续订阅服务器返回的数据。当有新的数据产生时，服务器会自动向客户端推送数据。
Subscription 的使用方法
使用 Subscription 需要两个步骤：定义 Subscription 和订阅 Subscription。
定义 Subscription
在 GraphQL 中，定义 Subscription 需要使用 type 关键字。下面是一个简单的 Subscription 定义：
---- ------------ - ----------- ------- -
这个 Subscription 定义了一个 newMessage 的操作，它返回一个 Message 类型的对象。
订阅 Subscription
在客户端，订阅 Subscription 需要使用 subscribe 函数。下面是一个简单的订阅代码：
----- ------------ - ----
------------ -
---------- -
--
-------
-
-
--
----- ------ - --- ------------------------------------------------- -
---------- ----
---
----- ---------- - ---------------- ------ ------------ ---
----------------------
----- ---- -- ------------------
------ ----- -- ---------------------
---这个代码使用了 graphql-subscriptions 库，它提供了 SubscriptionClient 和 Observable 类。SubscriptionClient 用于创建 WebSocket 连接，Observable 用于订阅 Subscription。
示例代码
下面是一个完整的示例代码，它使用 GraphQL 和 React 实现了一个实时聊天室。
后端代码
----- - ------------- ---- ------ - - -------------------------
----- - ------------ - - ----------------
----- - ------------------ - - --------------------------------------
----- ------ - --- ---------
----- -------- - ----
---- ----- -
--------- ---------
-
---- -------- -
-------------------- --------- -------
-
---- ------------ -
----------- -------
-
---- ------- -
--- ---
-------- -------
-
--
----- -------- - ---
----- --------- - -
------ -
--------- -- -- ---------
--
--------- -
------------ --- - ------- -- -- -
----- ------- - -
--- ---------------------- - ---
--------
--
-----------------------
----------------------------- - ----------- ------- ---
------ --------
--
--
------------- -
----------- -
---------- -- -- ------------------------------------
--
--
--
----- ------ - --- --------------
---------
----------
---
----- ---------- - ---------------
-----------------------------------------------
----------------------- -- -- -
--------------- ------ ----- -- ---------------------------------------------
--------------- ------------- ----- -- -------------------------------------------------
---
--------------------------
- -------- ---------- ------ --
- ------- ----------- ----- ------------------------ --
--这个代码使用了 Apollo Server 和 graphql-subscriptions 库。它定义了一个 Message 类型和三个操作：查询 messages，变异 sendMessage 和 Subscription newMessage。
前端代码
------ ------ - -------- - ---- --------
------ - ------------- -------------- --- - ---- -----------------
------ - ------------------ - ---- -----------------------------
----- ------------ - ----
------------ -
---------- -
--
-------
-
-
--
----- ------ - --- ------------------------------------------------- -
---------- ----
---
----- ---------- - ---------------- ------ ------------ ---
----------------------
----- ---- -- -
------------------------- ------------------
--
------ ----- -- ---------------------
---
----- ------ - --- --------------
---- --------------------------------
------ --- ----------------
---
----- --- - -- -- -
----- --------- ----------- - -------------
----- ---------- ------------ - -------------
----- ------------ - ----- ----- -- -
-----------------------
----- - ---- - - ----- ---------------
--------- ----
-------- -
-------------------- ------------- -
--
-------
-
-
--
---
---------------
------------------------- -------------------
--
------ -
-----
----
--------------------- -- -
--- ---------------------------------------
---
-----
----- ------------------------
------
-----------
---------------
--------------- -- -------------------------------
--
------- ---------------------------
-------
------
--
--
------ ------- ----这个代码使用了 Apollo Client 和 graphql-subscriptions 库。它订阅了 newMessage，并且使用 useMutation Hook 发送消息。
总结
GraphQL 的 Subscription 提供了一种方便的实时数据推送方式，它可以自动重连，并且可以在服务器有新数据时自动推送。本文介绍了 Subscription 的使用方法，并且提供了一个示例代码。如果你想实现实时数据推送，那么 GraphQL 的 Subscription 是一个值得尝试的技术。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f4b7192b3ccec22fd02ae9