GraphQL 是一种面向 API 的查询语言，它提供了一种更高效、更强大的方法来查询和更新数据。GraphQL 的一大特色就是其能够实现实时数据更新，这就是通过 GraphQL Subscriptions 来实现的。
在本文中，我们将介绍如何在 GraphQL 中使用 Subscriptions，并提供一个基于 React 和 Apollo 的具体实现示例，让读者可以更好地理解该特性的使用方式。
什么是 Subscriptions？
简单来说，GraphQL Subscriptions 是一种允许客户端实时接收服务端推送数据的方式。在传统的 REST API 中，客户端通常使用轮询（polling）技术来获取最新的数据，而轮询的效率通常很低。使用 GraphQL Subscriptions，客户端可以更加直接地获取最新数据，提高了效率和用户体验。
GraphQL Subscriptions 的基本用法
GraphQL Subscriptions 基于发布/订阅模型（Publish/Subscribe Model），允许你从 GraphQL 服务器实时地订阅和接收数据。GraphQL Subscriptions 能够让客户端实时地接收服务端数据，而无需定期轮询或等待。该特性内置在 GraphQL 的标准中，使用起来十分简单。
下面是 Subscriptions 的一个基本示例：
type Subscription {
newMessage(channelId: ID!): Message!
}该示例中的 Subscription 类型定义了一个订阅，该订阅接受一个 channelId 参数，并在该频道有新消息时返回一条新的 Message。通过这种方式，客户端可以订阅具体的频道，并实时接收新的消息。
基于 React 和 Apollo 的具体实现
下面我们将使用 React 和 Apollo 来实现一个具体的 Subscriptions 示例。为了简化示例，我们将使用一个基于 Apollo Client 的聊天应用。
安装和创建项目
我们需要使用 create-react-app 工具来创建 React 项目，并添加 apollo-client 和 subscriptions-transport-ws 包：
npx create-react-app chat --template=typescript cd chat npm install apollo-boost react-apollo graphql subscriptions-transport-ws
配置 Apollo Client
我们首先需要配置 Apollo Client 来支持订阅功能。在 index.tsx 文件中添加以下代码：
-- -------------------- ---- -------
------ - ------------------ - ---- -----------------------------
------ - ------------- ------------- - ---- ---------------
------ - ------------- - ---- -----------------
------ - -------------- - ---- ---------------
----- -------------------- - ----------------------------------
----- -------------------------- - ------------------------------------------
----- -------- - --- ----------
---- ---------------------
---
----- -------- - --- ---------------------------------------------- -
---------- ----
---
----- ------ - --- ------------------------
----- ---- - ------
-- ----- -- -- -
----- ---------- - -------------------------
------ --------------- --- --------------------- -- -------------------- --- ---------------
--
-------
---------
--
----- ------ - --- --------------
-----
------ --- ----------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--该代码中创建了一个 Apollo Client 实例，并配置了访问 GraphQL API 和订阅实时数据的地址。注意，我们使用了 WebSocketLink 和 SubscriptionClient 来支持实时订阅。
定义 Subscriptions
接下来我们需要在 GraphQL Schema 中定义 Subscriptions。打开 src/graphql.ts 文件，并添加以下代码：
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- -------------------- - ----
------------ ------------------------ ---- -
----------------------- ----------- -
--
----
-
-
--该代码中定义了一个 MESSAGE_SUBSCRIPTION，定义了 channelId 参数，并在推送新消息时返回 id 及消息文本。
订阅 Subscriptions
最后，我们需要在应用中添加一个 Subscription 组件，用于订阅 Subscriptions。在 Chat.tsx 文件中添加以下代码：
-- -------------------- ---- -------
------ - -- ----- ---- --------
------ - ------------ - ---- ---------------
------ - -------------------- - ---- -------------
--------- ----- -
---------- -------
-
--------- ------- -
--- -------
----- -------
-
------ ----- ----- --------------- - -- --------- -- -- -
----- ---------- ------------ - ------------------------------
------ -
-------------
-----------------------------------
------------ --------- --
---------------------- ---------------- -- -- -
----- - ---- - - -----------------
-------------------- -- ------------- --------------------
--
-
--- -- -
--
----------------- -- -
---- -----------------------------
---
------ ----------- --
---
--
---------------
--
--该代码中定义了一个 Chat 组件，并在其中订阅了 MESSAGE_SUBSCRIPTION。当这个 Subscription 组件接收到新的 Subscription 数据时，会将其添加到当前的聊天消息列表中。最后，将当前的聊天消息展示在组件中。
你已经看到了完整的 Subscriptions 的实现方式，你可以将其应用到你的 GraphQL 应用程序之中。
总结
在本文中，我们介绍了 GraphQL Subscriptions 的基本概念和用法，并提供了一个基于 React 和 Apollo 的具体实现示例。使用 Subscriptions，客户端可以更有效地获取实时数据，提高了效率。如果你还没有尝试过 GraphQL Subscriptions，现在就可以开始体验了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648c129f48841e9894a6049d