简介
@beardfury/apollo-client 是一种强大的 JavaScript 客户端，可轻松连接 Apollo GraphQL 服务器。该客户端使得发送 GraphQL 查询变得更容易，并提供了一组丰富的响应式功能，用于处理服务器的数据响应。
本文将介绍如何使用 @beardfury/apollo-client 创建一个基本的 GraphQL 客户端，在该客户端中，我们将能够发送查询到服务器并从服务器接收响应。
安装
使用 npm 安装 @beardfury/apollo-client：
npm install @beardfury/apollo-client
或使用 yarn：
yarn add @beardfury/apollo-client
配置
首先，我们需要为我们的 Apollo 客户端配置一些基本信息。将下面的代码添加到您的应用程序中：
import {ApolloClient, HttpLink, InMemoryCache} from '@beardfury/apollo-client';
const client = new ApolloClient({
link: new HttpLink({uri: 'https://example.com/graphql'}),
cache: new InMemoryCache(),
});上述代码将创建一个新的 Apollo 客户端，并为其提供了要连接的 GraphQL 服务器 URI（目前为 “example.com/graphql”）。如果您的 GraphQL 服务器位于不同的 URL 下，则需要将 URI 更改为相应的 URL。
发送查询
接下来，我们将使用我们的新 Apollo 客户端来发送一条查询请求。使用下面的代码将查询请求发送到服务器：
-- -------------------- ---- -------
------ ----- ---- ---------------------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--
-------------------- ----------------------- -- ---------------------上述代码定义了一个名为 getUsers 的 GraphQL 查询，并将其发送到我们在前面配置的服务器。一旦收到响应，我们将打印结果到控制台。
响应式查询
在 Apollo Client 中，可以使用 RxJS 操作符来处理响应式数据。以下是如何从服务器获取响应，并将其存储在状态变量中的示例：
-- -------------------- ---- -------
------ ----- ---- ---------------------------
------ ----------------- ---- -------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--
----- ----------- - --- --------------------
------
------------------- -----------
----------------- -- -------------------------------------
-------- ----- -
----- ------- --------- - -------------
------------ -- -
--------------------------------
-- ----
------ -
-----
--------------- -- -
---- --------------
------------------
-------------------
------
---
------
--
-上述代码将向服务器发送与前面相同的 GraphQL 查询，并使用 RxJS 提供的 watchQuery 方法来订阅响应式数据。一旦收到响应，用户数据将被存储在 userSubject 对象中，并使用 useState 和 useEffect 钩子存储在状态变量中。最后，将用户数据渲染为简单的列表。
结论
在本文中，我们介绍了如何使用 @beardfury/apollo-client 创建一个基本的 GraphQL 客户端，并发送查询请求到服务器。我们还将响应式功能与 RxJS 结合使用，以便在响应到达客户端时更新应用程序的状态。
我们希望这个教程对您在前端开发中使用 Apollo Client 有所帮助。感谢您的阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600560da81e8991b448df1db