如何构建实时 GraphQL API
GraphQL 是一种 API 查询语言和运行时，用于在应用程序中使用提供的数据。GraphQL 的优势包括减少网络传输量、提供更好的类型检查和可扩展性。本文将介绍如何使用 GraphQL 构建实时 API，以及如何在客户端订阅数据更改。
构建实时 GraphQL API
首先，我们需要创建一个 GraphQL API，以便客户端可以查询数据。在本文中，我们将使用 Apollo Server。通过创建一个 GraphQL schema ，开发人员可以指定客户端可以查询的数据字段和类型。
----- - --- - - -------------------------
----- -------- - ----
---- ---- -
--- ---
----- -------
-
---- ----- -
-------- ----- ----
------ -------
-
---- ------------ -
---------- -----
-
--
-------------- - ---------在上面的代码中，我们定义了 User 和 Query 类型。通过在 User 类型中添加 id 和 name 字段，我们确定了客户端可以查询的数据。在 Query 类型中，我们定义了两个操作：user 和 users。user 操作将返回一个指定 ID 的用户，而 users 操作将返回所有用户。
此外，我们还定义了一个 Subscription 类型，它表示可以订阅的事件。在这种情况下，我们定义了 userAdded 事件，该事件将在每次添加新用户时触发。
在定义了 GraphQL schema 后，我们可以使用 Apollo Server 来创建实际 API。我们可以在服务器上使用以下代码：
----- - ------------ - - -------------------------
----- -------- - ----------------------
----- ----- - ----- ---- ----- --------- ---- ---- ----- --------
----- --------- - -
------ -
----- -------- - -- -- -- --------------- -- ------- --- ----
------ -- -- ------
--
------------- -
---------- -
---------- -- -- -----------------------------------
-
-
--
----- ------ - --- --------------
---------
----------
---
---------------
-------- --- -- -- ------------------- ----- -- ----------在上面的代码中，我们使用了 typeDefs 来定义我们的 schema。我们还定义了 resolvers ，以便处理客户端发出的每个查询和订阅请求。
在 Query 类型中定义的 user 和 users 操作有一个对应的 resolver，它将返回相应的数据。在 Subscription 类型中定义的 userAdded 事件也有一个对应的 resolver，它将创建一个订阅，以便将来可以向客户端发送事件。
在以上代码的最后，我们使用 ApolloServer 构造函数创建了一个实例，并调用其 listen 方法来启动服务器。
通过运行上面的示例代码，我们现在可以在浏览器中打开 GraphQL Playground，并发出查询请求。
在左侧的查询窗格中，我们可以发出以下查询：
----- -
----- -
--
----
-
-这将返回以下响应：
-
------- -
-------- -
-
----- ----
------- -------
--
-
----- ----
------- -----
-
-
-
-现在我们已经创建了一个基本的 GraphQL API，我们可以开始添加实时功能。
向 GraphQL API 添加实时功能
为了向 GraphQL API 添加实时功能，我们需要使用 PubSub（发布-订阅）模式。PubSub 模式允许后端服务器向前端客户端发送事件，而不需要客户端请求。在我们的示例应用程序中，我们将创建一个 Mutation ，每当向用户数组添加新用户时，PubSub 将发送一个事件。
下面是如何修改 resolvers 以实现此目标的代码：
----- - ------ - - -------------------------
----- ------ - --- ---------
----- --------- - -
------ -
----- -------- - -- -- -- --------------- -- ------- --- ----
------ -- -- ------
--
--------- -
-------- -------- - ---- -- -- -
----- ---- - - --- ------------------- - --- ---- --
-----------------
--------------------------- - ---------- ---- ---
------ -----
--
--
------------- -
---------- -
---------- -- -- -----------------------------------
-
-
--我们添加了 Mutation 类型，以便客户端可以添加新用户。在 addUser resolver 中，我们将新创建的用户添加到数组中，并使用 pubsub.publish 方法发送一个 userAdded 事件，以便通知前端客户端。
在上述代码中，我们还更新了 Subscription resolver，以确保每次添加新用户时客户端都会收到用户。
在这里我们可以尝试我们的 Mutation：
-------- -
------------- ------ -
--
----
-
-运行 Mutation 后还需要使用 Subscription 去对添加数据进行监听：
------------ -
--------- -
--
----
-
-这将在客户端代码中启动一个 WebSocket 连接，并在每次调用 addUser Mutation 时接收 userAdded 事件。
客户端订阅数据更改
在原生的 GraphQL 语言中，没有提供实时查询，需要使用 Subscription 来解决这个问题。订阅查询参数与其他查询参数类似。只需在文档对象模型（DOM）中使用实时查询函数而不是执行普通查询。
在这里我们将使用 react-apollo 来订阅数据更改。
首先，我们需要创建一个查询：
----- --------- - ----
-
----- -
--
----
-
-
--接下来，我们可以使用一个简单的组件来渲染查询结果和一个订阅，以便及时更新用户列表。
------ ----- ---- --------
------ - --------- --------------- - ---- ----------------------
------ --- ---- --------------
----- --------- - ----
-
----- -
--
----
-
-
--
----- ----------------- - ----
------------ -
--------- -
--
----
-
-
--
----- --- - -- -- -
----- - -------- ------ ---- - - --------------------
----- - ----- ---------------- - - -----------------------------------
-- --------- ------ -------------
-- ------- ------ ------- ------------------
----- ----- - ---------------- - ---------------------------- -------------- - -----------
------ -
--
---------------
----
--------------- -- -
--- ------------------------------
---
-----
---
--
--
------ ------- ----在上述代码中，我们将用户列表作为 useQuery 的结果呈现，这将在加载应用程序时运行一次，然后使用 useSubscription 常量订阅用户列表中添加的任何新用户列表。
此外，我们通过检查 subscriptionData 是否存在，以及将其添加到用户数组中来进行实时更新。
结论
本文展示了如何使用 GraphQL 和 Apollo Server 来构建带有实时功能的 API，以及如何使用 PubSub 模式来处理实时数据。通过使用订阅，我们可以在服务器端发生变化时向订阅端发送事件，以便及时更新客户端的数据。
通过在 graphql-playground 中测试以及使用 react-apollo 订阅，我们可以轻松地使用此框架构建实时应用程序，这将在数据变化时为用户提供更好的用户体验。
已完结，谢谢。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66fcb619447136260171fd30