GraphQL 是一种查询语言，旨在简化应用程序对 API 的数据获取请求。它是一个相对新的技术，但已经在前端开发中得到了广泛的应用。在这篇文章中，我们将介绍如何使用 Apollo 客户端在 React 中查询 GraphQL 数据。
环境配置
在开始之前，我们需要安装一些依赖项。我们需要安装 react, react-dom, graphql, graphql-tag 和 @apollo/client：
npm install --save react react-dom graphql graphql-tag @apollo/client
接下来，我们需要在我们的 React 项目中创建一个 Apollo 客户端。我们可以通过以下方式：
import { ApolloClient, InMemoryCache } from '@apollo/client';
const client = new ApolloClient({
uri: 'https://example.com/graphql', // GraphQL API 的端点
cache: new InMemoryCache(),
});通过这段代码创建了一个 Apollo 客户端，传递了一个 uri，指向我们的 GraphQL API 的端点，以及一个缓存对象。这个缓存对象可以用来存储我们从 API 获取的数据，以便以后使用。
我们现在已经配置好了环境，接下来，让我们看一下如何编写一个 GraphQL 查询。
编写 GraphQL 查询
想要查询 GraphQL 数据，我们需要使用 GraphQL 查询语言。例如，我们可以通过以下方式创建一个查询：
-- -------------------- ---- -------
------ - --- - ---- -----------------
----- --------- - ----
----- -------- -
----- -
--
----
-----
-
-
--在这个简单的查询中，我们查询了一个名为 users 的字段，并选择了其 id，name 和 email 属性。
现在我们已经编写了一个查询，让我们看一下如何在 React 中使用 Apollo 客户端查询数据。
在 React 中查询数据
我们可以使用 useQuery 钩子函数，它可以帮助我们从 Apollo 客户端中获取数据。例如，我们可以使用以下代码来查询我们在上面定义的 GET_USERS 查询：
-- -------------------- ---- -------
------ - -------- - ---- -----------------
-------- ------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
---- ------------------
-------------------- -- -
---- ------------- -----------------
-------- ---------------
--------- ----------------
------
---
------
--
-在这个示例中，我们使用了 useQuery 钩子函数来查询我们在上面定义的 GET_USERS 查询。useQuery 钩子函数返回了一个包含 loading，error 和 data 属性的对象。这些属性分别反映了当前数据加载的状态，任何错误以及我们从 API 中获得的数据。
如果我们的数据正在加载中，我们将显示一个带有 “Loading...” 的段落。如果我们在查询时遇到了错误，我们将显示一个带有 “Error :(” 的段落。否则，我们将从返回的数据中映射出每个用户的 name 和 email。
我们现在已经成功地查询了 GraphQL 数据，请记住，您可以通过查询多个字段和嵌套类型来编写更复杂的查询。
结论
在这篇文章中，我们介绍了如何使用 Apollo 客户端在 React 中查询 GraphQL 数据。我们先引入了所需的依赖项，然后生成了 Apollo 客户端实例。接着，我们编写了一个简单的 GraphQL 查询，并使用 useQuery 钩子函数，在应用程序中查询了这个查询。
GraphQL 是一个非常强大的技术，可以帮助我们简化对 API 的数据获取请求。在使用 GraphQL 时，可以通过配置客户端并编写查询来开始。我们希望这篇文章能够帮助您了解如何在 React 中查询 GraphQL 数据，并为您的项目提供指导和启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674805cb5883fc5ebff10833