前言
apollo-link-ws 是 Apollo Client 的一个插件，它用于通过 WebSocket 连接 GraphQL 服务器。它提供实时数据和实时更新，在现代 Web 应用中非常有用。本教程将介绍如何在你的前端项目中使用 apollo-link-ws 插件。
前提条件
- 你已经安装了 Node.js 和 npm。
- 你已经在项目中集成了 Apollo Client。
安装
使用下面的命令安装 apollo-link-ws：
npm i apollo-link-ws
使用
首先，让我们创建一个 WebSocket 连接。我们可以使用类似下面的代码来创建一个连接：
-- -------------------- ---- ------- ------ - ------------- - ---- ----------------- ------ - ------------ - ---- ---------------- ------ - ------------- - ---- ------------------------ ----- ---- - --- --------------- ---- ------------------------------ -------- - ---------- ---- - --- ----- ------ - --- -------------- ----- ------ --- --------------- ---展开代码
在这个例子中，我们创建了一个 WebSocketLink 对象，然后传递一些配置选项，用于建立一个 WebSocket 连接。reconnect 选项用于自动重连，以防止连接断开。我们还创建了一个 Apollo 客户端，并将 WebSocketLink 对象传递给它。
接下来，让我们看看如何通过 WebSocket 发送 GraphQL 查询：
-- -------------------- ---- ------- ------ - --- - ---- --------------- ----- --------- - ---- ----- - ----- - -- -------- - - -- -------------- ------ --------- -- ------------ -- -------------------- ------------ -- ----------------------展开代码
在这个例子中，我们定义了一个名为 GET_USERS 的 GraphQL 查询，并将它传递给 client.query 函数。这个函数会将查询发送给服务器，并返回查询结果。
示例代码
服务端
我们将使用 graphql-yoga 来创建一个 GraphQL 服务器，回送实时数据。
首先，让我们安装 graphql-yoga：
npm i graphql-yoga
接下来，创建一个名为 index.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ----- - ------------- - - ------------------------ ----- - ------ - - --------------------------------- ----- ------ - --- --------- ----- -------- - - ---- ---- - --- --- --------- ------- - ---- ----- - ------ -------- - ---- ------------ - ---------- ----- - -- ----- ----- - - - --- ---- --------- ------- -- - --- ---- --------- ----- -- - --- ---- --------- --------- -- -- ----- --------- - - ------ - ------ -- -- ------ -- ------------- - ---------- - ---------- -- -- ---------------------------------- - -- -- ----- ------ - --- --------------- --------- --------- --- --------------- -- ------------------- -- ------- -- ----------------------- -- -------------- -- - ----- ---- - - --- ------------------- - --- --------- ----- -------------- - --- -- ----------------- --------------------------- - ---------- ---- --- -- ------展开代码
在这个例子中，我们定义一个名为 User 的类型，它有两个字段：id 和 username。我们还定义了一个名为 Query 的类型，其中我们定义了一个名为 users 的字段。users 字段返回了一个 User 类型的数组。
我们还定义了一个名为 Subscription 的类型，其中我们定义了一个名为 userAdded 的字段。它是一个订阅类型，用于接收实时数据。
最后，我们创建了一个 GraphQL 服务器，并在每隔 3 秒向 users 数组添加新用户，以测试实时数据功能。
客户端
接下来，我们将创建一个 Apollo 客户端，并使用 apollo-link-ws 来连接到我们的 GraphQL 服务器，并在 Web 应用中显示数据。
首先，让我们安装 react, react-dom, apollo-boost, graphql 和 react-apollo：
npm i react react-dom apollo-boost graphql react-apollo
接下来，创建一个名为 src/index.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - ------ - ---- ------------ ------ ------------ ---- --------------- ------ - -------------- - ---- --------------- ------ - ------------ - ---- --------------- ------ --- ---- -------------- ------ ------ ---- ----------------- ----- ------ - --- -------- ---- ---------------------- -------- - ---------- ---- - --- ----- ------ - --- -------------- ----- ------- ---- -------------------------------- --- ----- --------- - ---- ----- - ----- - -- -------- - - -- ----- ---------- - ---- ------------ - --------- - -- -------- - - -- ----- -------- - -- ----- - -------- ------ ----- - -- - -- -- - -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ - ---- --------------- -- - --- ---------------------------------- --- ----- -- -- ----- --- - -- -- - --------------- ---------------- ----- --------------- ------------- -------------------------- --- ----- ------- -- -- --------- ----------------- --------- --- --------------- ------ ----------------- -- ----------- --- ---------------------------------展开代码
在这个例子中，我们创建了一个名为 wsLink 的 WebSocketLink 对象，用于与 GraphQL 服务器建立 WebSocket 连接。我们还创建了一个 Apollo 客户端，并将 wsLink 对象传递给它。
我们还定义了两个 GraphQL 查询：GET_USERS 和 USER_ADDED。GET_USERS 查询用于获取用户列表。USER_ADDED 查询是一个订阅类型，用于接收新用户的实时数据。
我们创建了一个名为 UserList 的组件，用于处理用户的列表。我们将它作为 Subscription 组件的子组件，并将 USER_ADDED 查询作为参数传递给它。
最后，我们创建了一个名为 App 的组件，并将 ApolloProvider 包装器作为其子节点。我们将 UserList 组件传递给 Subscription 组件，并在 UI 中显示用户列表。
结论
在本教程中，我们学习了如何使用 apollo-link-ws 插件与 GraphQL 服务器建立 WebSocket 连接，并通过 WebSocket 发送实时数据。我们还创建了一个示例应用程序，用于演示如何将实时数据集成到现代 Web 应用中。祝你好运！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/196122
