如何在 GraphQL 中使用实时订阅
GraphQL 是一种适用于 API 的查询语言和运行时环境。它能够提供强类型、客户端定义的查询语法来支持应用程序数据的接口。 GraphQL 广泛应用于各种类型的应用程序开发，让前端开发变得更加灵活、高效。
与 RESTful API 相比，GraphQL 中最常用的功能是实时订阅。它可以让客户端持续订阅 GraphQL 服务端的数据，并在数据更新时主动接收到相应的通知。
在本文中，我们将介绍 GraphQL 中使用实时订阅的方法和示例代码。
GraphQL 实时订阅概述
用 GraphQL 实现实时订阅的主要步骤如下：
- 定义 Subscription 类型。Subscription 类型与 Query 和 Mutation 类型类似，它定义可用于订阅和通知的 GraphQL 数据模型。
例如：
type Subscription {
postAdded: Post!
}上述代码定义了一个 postAdded 订阅，该订阅用于在新文章添加到系统中时发送通知。
- 在服务端实现 Subscription。实现 Subscription 的方法与 Query 和 Mutation 类型类似。在 Node.js 中，您可以使用 Apollo Server 或 graphql-yoga 等 GraphQL 服务器框架来实现。
例如：
-- -------------------- ---- -------
----- - ------ - - ------------------------
----- ------ - --- --------
----- ---------- - ------------
----- -------- - -
---- ---- -
--- ---
------ -------
-
---- ----- -
------ --------
-
---- -------- -
-------------- --------- -----
-
---- ------------ -
---------- -----
-
-
----- --------- - -
------ -
------ -- -- ------
--
--------- -
-------- -------- - ----- -- -- -
----- ---- - - --- --------- ----- -
----------------
-------------------------- - ---------- ---- --
------ ----
--
--
------------- -
---------- -
---------- -- -- -----------------------------------
--
--
-上述代码实现了一个简单的 GraphQL 服务器，该服务器支持查询文章、添加文章和订阅新文章添加事件。
- 在客户端使用实时订阅。您可以在客户端的代码中使用 Apollo Client 或其他 GraphQL 客户端框架来订阅服务端的 GraphQL 实时数据更新事件。
例如：
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------------- -------------- --- - ---- ----------------
------ - ------------- - ---- ------------------------
----- ------ - --- --------------
----- --- ---------------
---- -----------------------
-------- -
---------- -----
--
---
------ --- ----------------
--
----- ---------- - ----
------------ -
--------- -
--
-----
-
-
-
-------- ----- -
----- - ---- - - ---------------------------
------ -
-----
----- -- -
-----
-----------------------------
------
--
------
-
-上述代码展示了如何使用 Apollo Client 订阅服务端的新文章添加事件，并在文章添加时更新客户端 UI。
结论
GraphQL 的实时订阅功能赋予了 Web 应用程序更好的实时性，也为前端开发带来了更多的可扩展性和灵活性。在本文中，我们介绍了如何在 GraphQL 中使用实时订阅，并提供了示例代码。希望本文能够帮助您更好地理解和使用 GraphQL 的实时订阅功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676db99182fcee791c69ba12