@apollo/react-hooks 是一个用于 React 应用的 GraphQL 客户端，它提供了一套 React Hooks 接口，使得在 React 中使用 GraphQL 变得更加便捷和高效。在本文中，我们将会详细介绍如何使用 @apollo/react-hooks 包来进行 GraphQL 查询，并提供一些示例代码来帮助你更好地理解。
安装
你可以通过以下命令来安装 @apollo/react-hooks 包：
npm install @apollo/react-hooks apollo-boost graphql
在安装这个包之前，你需要确保已经安装了 graphql 和 apollo-boost 包，这两个包是 @apollo/react-hooks 的依赖。
使用
要在你的 React 应用中使用 @apollo/react-hooks，你需要先创建一个 Apollo Client 实例。你可以在你的 index.js 或者 App.js 中实例化 Apollo Client。以下代码展示了如何使用 apollo-boost 实例化 Apollo Client：
import { ApolloClient } from 'apollo-boost';
import { InMemoryCache } from 'apollo-cache-inmemory';
const client = new ApolloClient({
uri: 'https://api.example.com/graphql',
cache: new InMemoryCache()
});其中 uri 属性表示你的 GraphQL API 接口的地址。在上述示例中，我们使用了 apollo-cache-inmemory 这个包来启用 client 的缓存，这是可选的。
接下来，在你的组件中使用 GraphQL 查询，你可以通过 useQuery hook 来实现。以下是一个示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ --- ---- --------------
------ - -------- - ---- ----------------------
----- ---------- - ----
----- --------- -------- -
-------- ---- -
-----
-----
-
-
--
-------- ------ -
----- - -------- ------ ---- - - -------------------- -
---------- - --- ----- --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
--
-------- --------------------
--------- ---------------------
---
--
-在上面的示例中，useQuery hook 接收一个 GraphQL 查询和一些可选参数，其中包括查询中需要的变量等。useQuery hook 会返回 loading，error 和 data 这三个对象，用于在请求 GraphQL 数据时处理不同的场景。在上述示例中，如果数据还在请求中，则显示 "Loading..."，如果请求失败，则显示 "Error :("，如果请求成功，则显示用户的姓名和邮箱地址。
指导意义
我们希望这篇文章能够帮助你学会如何使用 @apollo/react-hooks，从而更好地在 React 应用中使用 GraphQL。这个包提供了一套方便的 React Hooks 接口，使得在 React 应用中使用 GraphQL 变得更加容易和高效。我们鼓励你去检查文档，探索这个包的更多API，并拓展你的学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/115798