GraphQL 是一种用于 API 的查询语言，它提供了一种更加有效和强大的方式来获取和操作数据。在 GraphQL 中，我们可以定义一个查询语句，然后发送给服务器，服务器会返回我们所需的数据。GraphQL 中最有趣的功能之一就是实时数据查询，它允许我们在数据发生变化时立即获得更新的数据。
在这篇文章中，我们将介绍如何在 GraphQL 中实现实时数据查询，包括以下内容：
- 什么是实时数据查询
- 如何在 GraphQL 中实现实时数据查询
- 示例代码
什么是实时数据查询
实时数据查询是指当数据发生变化时，客户端能够立即获得更新的数据。在传统的 REST API 中，客户端必须定期轮询服务器以获取更新的数据，这会浪费很多带宽和资源。而在 GraphQL 中，我们可以使用实时数据查询来避免这种浪费。
实时数据查询通常使用 WebSocket 协议来实现，因为 WebSocket 允许服务器主动向客户端发送数据，而不需要客户端发起请求。这使得实时数据查询变得非常高效和及时。
如何在 GraphQL 中实现实时数据查询
在 GraphQL 中实现实时数据查询需要使用一个叫做 Subscription 的功能。Subscription 允许我们定义一个查询语句，然后在数据发生变化时，服务器会自动向客户端发送更新的数据。
下面是一个示例的 Subscription：
subscription {
newMessage {
id
content
}
}这个 Subscription 表示我们希望订阅一个名为 newMessage 的事件，并在事件发生时获取消息的 ID 和内容。当有新的消息时，服务器会自动向客户端发送更新的数据。
在服务器端，我们需要实现一个用于处理 Subscription 的 resolver。这个 resolver 需要返回一个类似于 EventEmitter 的对象，它可以用于触发事件。下面是一个示例的 resolver：
-- -------------------- ---- -------
----- - ------ - - ---------------------------------
----- ------ - --- ---------
----- ----------- - --------------
----- --------- - -
------------- -
----------- -
---------- -- -- ------------------------------------
--
--
--------- -
----------- --- - ------- -- -- -
----- -- - ---------
----- ------- - - --- ------- --
--------------------------- - ----------- ------- ---
------ --------
--
--
--这个 resolver 包含两个部分：
- Subscription：定义了一个名为 newMessage 的 Subscription，并使用 PubSub 对象订阅了一个名为 NEW_MESSAGE 的事件。
- Mutation：定义了一个名为 addMessage 的 Mutation，并在添加消息时使用 PubSub 对象发布了一个名为 NEW_MESSAGE 的事件。
在客户端，我们需要使用一个 WebSocket 客户端来连接服务器，并订阅 Subscription。下面是一个示例的客户端代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - ------------ - ---- ----------------
------ - -------- - ---- -------------------
------ - ------------- - ---- ------------------------
------ --- ---- --------------
----- -------- - --- ------------------------------------------------- -
---------- -----
---
----- ---- - --- ----------
---- --------------------------------
------------ --------------
---
----- ------ - --- --------------
-----
------ --- ----------------
--------------- -
----------- -
------------ --------------------
--
--
---
----- ------------ - ----
------------ -
---------- -
--
-------
-
-
--
----- -------- - -
----- ------ -- -
---------------- ------- --------- -- -----------------
--
------ ----- -- -------------------
--------- -- -- ------------------------- -----------
--
----- ----- - ------------------ ------ ------------ -----------------------这个客户端代码使用 subscriptions-transport-ws 库来连接服务器，并订阅了名为 newMessage 的事件。当有新的消息时，客户端会收到更新的数据，并在控制台打印出来。
示例代码
下面是一个完整的示例代码，它演示了如何在 GraphQL 中实现实时数据查询：
服务器端代码
-- -------------------- ---- -------
----- - ------------- --- - - -------------------------
----- - ------ - - ---------------------------------
----- - --- ------ - - ----------------
----- ------ - --- ---------
----- ----------- - --------------
----- -------- - ----
---- ------- -
--- ---
-------- -------
-
---- ----- -
--------- ---------
-
---- -------- -
------------------- --------- -------
-
---- ------------ -
----------- -------
-
--
----- --------- - -
------ -
--------- -- -- ---
--
--------- -
----------- --- - ------- -- -- -
----- -- - ---------
----- ------- - - --- ------- --
--------------------------- - ----------- ------- ---
------ --------
--
--
------------- -
----------- -
---------- -- -- ------------------------------------
--
--
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
--------------- ------ ----- -- ---------
---客户端代码
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - ------------ - ---- ----------------
------ - -------- - ---- -------------------
------ - ------------- - ---- ------------------------
------ --- ---- --------------
----- -------- - --- ------------------------------------------------- -
---------- -----
---
----- ---- - --- ----------
---- --------------------------------
------------ --------------
---
----- ------ - --- --------------
-----
------ --- ----------------
--------------- -
----------- -
------------ --------------------
--
--
---
----- ------------ - ----
------------ -
---------- -
--
-------
-
-
--
----- -------- - -
----- ------ -- -
---------------- ------- --------- -- -----------------
--
------ ----- -- -------------------
--------- -- -- ------------------------- -----------
--
----- ----- - ------------------ ------ ------------ -----------------------结论
在本文中，我们介绍了如何在 GraphQL 中实现实时数据查询。通过使用 Subscription 和 WebSocket，我们可以更加高效和及时地获取更新的数据。这对于需要实时获取数据的应用程序来说非常重要。希望本文对你有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675c13eee5138b92227f49db