前言
在现代 Web 应用的开发中，我们通常会用到 GraphQL 作为应用的数据传输层。而作为一个可用于构建客户端应用的 GraphQL 客户端库，@apollo/client 受到了越来越多开发者的关注。
本文将为大家详细介绍如何使用 @apollo/client 这一 npm 包来集成 GraphQL 客户端，并以实例代码的形式为大家说明如何进行此类操作。
安装
在使用 @apollo/client 之前，首先需要进行安装。在使用中，我们会用到它的两个主要部分：ApolloProvider 和 useQuery。
在项目中安装 @apollo/client 可以使用 npm 或者 yarn，具体如下：
npm install @apollo/client
yarn add @apollo/client
ApolloProvider
ApolloProvider 是一个 React 组件，它被用来为子组件提供 ApolloClient 实例。这个实例可以在整个应用程序中进行共享，从而实现对 GraphQL 的查询、变更和订阅以及数据缓存。
下面是 ApolloProvider 的基本用法：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ -------- ---- ------------ ------ - --------------- ------------- ------------- - ---- ----------------- ------ --- ---- -------- ----- ------ - --- -------------- ---- -------------------------------- ------ --- --------------- --- ---------------- --------------- ---------------- ---- -- ------------------ ------------------------------- --展开代码
在这个例子中，我们首先从 @apollo/client 中引入 ApolloProvider、ApolloClient 和 InMemoryCache。然后，我们创建了一个被称为 client 的 ApolloClient 实例，并将其传递给 ApolloProvider 的 client props。这将把 client 实例注入到整个应用程序中，从而使所有带有使用 useQuery 或其他 Apollo Client 钩子的组件内部可用。
useQuery
现在我们已经配置好了 ApolloProvider，就可以在组件中使用 useQuery 钩子来进行 GraphQL 查询了。
useQuery 钩子会接收一个包含 GraphQL 查询的字符串作为参数。当组件被渲染时，useQuery 会发送该查询到服务器，并且当服务器响应时，它会返回带有数据的响应对象。这个响应对象里包括了错误和加载状态，并且也可以获取到最新的数据。
下面是一个简单的例子：
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- --- - ---- ----------------- ----- --------- - ---- ----- - ----- - ---- - - -- -------- ------- - ----- - -------- ------ ---- - - -------------------- -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ ----------------- ---- -- -- - ---- ----------- ------------- ------ --- - ------ ------- ------展开代码
在这个例子中，我们首先从 @apollo/client 中引入 useQuery 和 gql。然后，我们在组件内部定义了一个名为 GET_USERS 的 GraphQL 查询。接下来，我们通过 useQuery 钩子使用该查询，并将响应对象中的 loading、error 和 data 对象提取出来。在加载状态中，我们简单地返回一个 Loading 信息。在错误状态中，我们返回 Error 错误信息。在数据状态中，我们默认 data 对象将返回由查询返回的所有数据，并将其映射为一个简单的列表。每个 Item 都包含一个名为 name 的字段，我们在 Map 中按照 name 显示了该字段。
结束语
通过以上的介绍，相信大家对 @apollo/client 库有了初步的了解，并能够使用该库来集成 GraphQL 客户端。值得注意的是，@apollo/client 这一库还有许多其他的能力和功能，需要开发者们逐一尝试掌握。
以 @apollo/client 为例，本文介绍了如何通过 ApolloProvider 和 useQuery 钩子使用它。相信有了这个入门后，读者也能在实际开发中顺利使用它，为更轻松的开发带来一份助力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f697a47a9b7065299ccb807
