在构建前端应用程序时，React 是一个非常强大的框架。它提供了很多便捷方法和库，可以帮助我们构建功能强大的应用程序。其中最有用的可能就是useState和useEffect。
useState 用于在函数组件中定义状态，而 useEffect 则用于管理副作用。对于副作用，我们通常指对浏览器之外的环境进行操作，例如获取数据或更改路由等等。本文将介绍如何在 useEffect Hook 中使用 GraphQL。
什么是 GraphQL？
GraphQL 是一个用于 API 的查询语言和运行时。它允许前端应用程序通过定义需要获取的数据来指定数据的形状。GraphQL 还提供总结信息，可以让前端应用程序优化网络请求并缓存数据。
在这个例子中，我们将使用 Apollo 客户端连接到 GraphQL 服务。我们假设您已经了解了如何设置 Apollo 客户端以连接到服务，并且将重点放在如何在 useEffect Hook 中使用 GraphQL。
使用 useEffect Hook 与 GraphQL 获取数据
为了演示如何使用 GraphQL 获取数据，我们将创建一个示例程序。在我们的示例程序中，我们将使用 GitHub 的 GraphQL API 来检索所有 GitHub 上的公共存储库的所有信息。为了达到这个目的，我们首先需要安装依赖项。
npm install apollo-boost graphql
查询
要从 GraphQL API 中获取数据，我们需要定义一个查询。查询的构造和 GraphQL 语法有关。这是我们的查询：
-- -------------------- ---- -------
-
------------- ------------- ----- ----------- ------ --- -
----- -
---- -
--- -- ---------- -
----
---
---------
-
-
-
-
-这个查询将返回第一次搜索结果中 100 个以上星标的公共存储库的名称，URL 和更新时间。查询遵循这些步骤：
- 搜索存储库并使用查询字符串用于搜索。
- 搜索结果的类型是 REPOSITORY，我们只需要前 10 个结果。
- 在搜索结果中，我们需要每个存储库的名称、URL 和更新时间。
查询的实现
我们将查询放在一个单独的文件中。我们称它为github.js。以下代码显示了具有查询的内容。
-- -------------------- ---- -------
------ --- ---- --------------
------ ----- --------- - ----
-
------------- ------------- ----- ----------- ------ --- -
----- -
---- -
--- -- ---------- -
----
---
---------
-
-
-
-
-
--这将定义一个名为GET_REPOS的查询。
定义 React 组件
我们需要一个组件，我们将在其中使用此查询。在示例应用程序中，我们将使用函数组件来定义我们的组件。以下代码显示了组件：
-- -------------------- ---- -------
------ ------ - --------- --------- - ---- --------
------ - -------- - ---- ----------------------
------ - --------- - ---- -----------
------ ------- -------- ----- -
----- -------------- ---------------- - -------------
----- - -------- ------ ---- - - --------------------
------------ -- -
-- ------ -
----- ----- - ---------------------------- -- -----------
-----------------------
-
-- --------
------ -
-----
---------- -----------------
-------- -- ------------------
------------------------ -- -
---- ---------------
----
-- -------------------------------
-----
------- -------- --------------------
------
---
------
--
-这个代码片段显示了我们展示查询结果的代码。在这里，我们使用了useQueryHook，用于将查询与 Apollo 客户端进行绑定。如果查询正在加载，则显示一条正在加载的消息。否则，我们将显示所有存储库的名称，并提供最后更新时间的信息。
总结
本文介绍了如何在 useEffect Hook 中使用 GraphQL。我们还提供了一个演示我们如何使用 useEffect Hook 与 Apollo 客户端和 GitHub 的 GraphQL API 获取数据的示例。当我们定义好查询之后使用它们并不是有问题的，而是在了解使用 Hook 时如何更好地将它们整合在一起。现在，你可以在你的 React 应用程序中使用 GraphQL 来获取数据了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65af9629add4f0e0ff90879a