GraphQL 是一种用于 API 的查询语言和运行时环境，它旨在提供更高效、强类型和可扩展的API设计方式。而 Next.js 是一种 React 框架，它支持服务器端渲染并提供可靠的开发体验。在使用 Next.js 开发应用时，如果需要实时更新数据，使用 GraphQL Subscriptions 可以是一个有效的解决方案。本文将介绍如何在 Next.js 中使用 GraphQL Subscriptions，并提供详细的学习和指导意义。
GraphQL Subscriptions 简介
GraphQL Subscriptions 是 GraphQL 的一个扩展，它允许客户端订阅某些事件，并在这些事件发生时获取实时更新。相比于常规的 GraphQL 查询，GraphQL Subscriptions 是双向的，允许服务器端向客户端主动推送数据，从而实现实时更新的效果。
例如，假设我们有一个聊天室应用程序，用户可以发送消息并接收其他用户的消息。使用 GraphQL Subscriptions，服务器可以向客户端推送新消息，而无需客户端定期轮询服务器以检查新消息，这样可以减少网络流量并提高应用程序的效率。
在 Next.js 应用中使用 GraphQL Subscriptions
要在 Next.js 应用中使用 GraphQL Subscriptions，我们需要完成以下步骤：
- 安装所需的依赖项
- 编写 GraphQL Subscription 的服务器端代码
- 在客户端代码中编写 GraphQL Subscription
安装所需的依赖项
首先，我们需要使用 npm 或 yarn 安装以下依赖项：
npm install apollo-boost apollo-client apollo-link-http apollo-link-ws graphql subscriptions-transport-ws
或者
yarn add apollo-boost apollo-client apollo-link-http apollo-link-ws graphql subscriptions-transport-ws
这些依赖项将帮助我们在 Next.js 应用中使用 GraphQL Subscriptions。
编写 GraphQL Subscription 的服务器端代码
接下来，我们需要在服务器端实现 GraphQL Subscription 的代码。我们将使用一个简单的 WebSocket 服务器来处理 GraphQL Subscriptions。在这个例子中，我们将使用 ws 库来创建 WebSocket Server，并使用 graphql-subscriptions库来处理 GraphQL Subscriptions。
-- -------------------- ---- -------
----- - -------------------- - - -------------------------
----- - ------------------ - - --------------------------------------
----- - -------- --------- - - -------------------
----- -------- - -
---- ------- -
--- ---
----- -------
-
---- ----- -
--------- -----------
-
---- -------- -
----------------- --------- --------
-
---- ------------ -
----------- --------
-
--
----- -------- - ---
----- --------- - -
------ -
--------- -- -- ---------
--
--------- -
------------ --- - ---- -- -- -
----- ------- - -
--- ---------------------- - ---
-----
--
-----------------------
------ --------
--
--
------------- -
----------- -
---------- -- -- ------------------------------------
--
--
--
----- ------ - ----------------------
---------
----------
---
----- ------------------------- - -
---------- ------------------ ---------- -- -
--------------------------- ------ --------- ----- ---------- ------- --------------------------------------
--
------------- ----------- -------- -- -
--------------------------- ------ ------------ ----- -------- -----------------------------
--
-------
--------
----------
--
-------------------------- - -------------------
--------------------------------- - --------------------------上述代码创建了一个 GraphQL Schema，并将其传递给 SubscriptionServer。然后，我们订阅了newMessage Subscription，这意味着每当新消息添加到 messages 数组时，我们将向客户端推送新消息。请注意，我们在这里使用了 pubsub.asyncIterator，它需要定义并使用一个 pubsub 模块来实现。在这个例子中，我们没有定义这个 pubsub 模块，因为这不是关键点。我们只需要知道，在实际应用中，我们需要定义和使用一个 PubSub 模块来实现这个功能。
在客户端代码中编写 GraphQL Subscription
现在，我们已经完成了服务器端的代码，下一步是在客户端中实现 GraphQL Subscription。首先，我们需要创建一个 Apollo Client，然后使用 subscriptions-transport-ws 库来创建一个 WebSocket 连接。在创建 WebSocket 连接后，我们可以使用 apollo-link-ws 创建一个 Apollo Link，它将 WebSocket 连接作为其传输协议。
-- -------------------- ---- -------
------ - ------------ - ---- ----------------
------ - ------------- - ---- ------------------------
------ - -------- - ---- -------------------
------ - ------------- - ---- -----------------
------ - ------------------ - ---- -----------------------------
----- -------- - --- ----------
---- --------------------------------
---
----- ------ - --------------- - --- ----------------- ------------------------------------------------------- -
---------- -----
--- - -----
----- ---- - ------ - --- ------------------
-- ----- -- -- -
----- - ----- --------- - - -------------------------
------ ---- --- --------------------- -- --------- --- ---------------
--
-------
---------
- - ---------
----- ------ - --- --------------
-------- -----
-----
------ --- ----------------
---在客户端代码中，我们需要设置正确的 URL 来连接到服务器端。在上述代码中，我们使用了 'http://localhost:3000/graphql'来连接到服务器端。然后，我们使用 subscriptions-transport-ws 库的 SubscriptionClient 来创建一个 WebSocket 连接。在创建 WebSocket 连接后，我们使用 apollo-link-ws 创建一个 Apollo Link，并将 WebSocket 连接作为传输协议。接下来，我们使用 apollo-link-http 创建了另一个 Apollo Link，并将其用于处理常规 GraphQL 查询和变更操作。最后，我们使用 Apollo Client 将这些链接链接起来。
接下来，我们需要在组件中使用 useSubscription Hook 来订阅新消息。
-- -------------------- ---- -------
------ - ---------------- --- - ---- -----------------
----- ------------------------ - ----
------------ ---------------------- -
---------- -
--
----
-
-
--
-------- ---------- -
----- - ---- - - ------------------------------------------
----- -------- - ---------------- - --------------------- ---------------- - -----------------
---
------ --------------
-上述代码使用 useSubscription Hook 来订阅 NEW_MESSAGE_SUBSCRIPTION Subscription。当订阅后，我们可以从返回的数据中提取新消息。请注意，订阅时不需要再进行轮询，因为 GraphQL Subscriptions 是双向的，当有新消息时，服务器主动向客户端推送数据。
总结
在本文中，我们介绍了如何在 Next.js 应用中使用 GraphQL Subscriptions，并提供了详细的学习和指导意义。首先，我们了解了 GraphQL Subscriptions 的基本知识，并且有实际的应用场景。然后，我们完成了服务器端和客户端的代码，并展示了如何订阅和使用 GraphQL Subscriptions。最后，我们强调了 GraphQL Subscriptions 是一种有效的实时更新数据的方式，在某些场景下，可以提高应用程序的效率和响应性。
完整示例代码请参考 GitHub Repository 。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed203ef6b2d6eab3749108