在前端开发中，React 和 Apollo 并非陌生的技术，React 作为一款流行的前端 UI 库，而 Apollo 则是一个优秀的 GraphQL 客户端。
在使用 Apollo 过程中，它提供了许多能力，包括一些钩子函数，但是它的使用有时会让我们感觉繁琐。而在这种情况下，react-apollo-hooks 这个 npm 包的出现为我们提供了便利。
本文将介绍如何使用这个 npm 包，并提供一些示例代码。
安装
首先，在你的 React 项目中安装 react-apollo-hooks 包：
--- ------- ------------------
接下来，你需要使用这个包中的钩子来获取数据。
简单使用
我们将从最基本的例子开始。
首先，在你的应用中引入 Apollo 客户端并创建 GraphQL 查询。例如我们将从后端 API 获取一本图书的信息：
------ ------------ ---- ---------------
------ --- ---- --------------
----- ------ - --- --------------
---- ----------------------------------
---
----- ---------- - ----
----- -------------- ---- -
-------- ---- -
-----
------
-
-
--然后，使用 useQuery 钩子函数来获取这个查询返回的数据：
------ - -------- - ---- ---------------------
-------- ------ -- -- -
----- - -------- ------ ---- - - -------------------- -
---------- - --- -- --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
----------------------------
---------------------------
------
--
-钩子函数
react-apollo-hooks 提供了三个不同的钩子，让我们可以使用它们在 React 组件中轻松地和 Apollo 进行交互。这些钩子包括：
useQuery- 获取 GraphQL 查询中返回的数据；useMutation- 执行 GraphQL 变更操作并获取返回的数据；useSubscription- 使您的组件通过 WebSocket 订阅 GraphQL 数据。
在这篇文章中，我们重点关注 useQuery 钩子函数，但请注意其他钩子也非常有用。
使用环境
由于 react-apollo-hooks 是基于 hook 的，因此它需要使用 React 16.8+，这也是 React 添加 hook 的版本。
如果您的项目已经使用了早期版本的 React，请考虑升级到新版本，您可能会发现使用 hooks 能够极大地提升代码的可读性和可维护性。
附加功能
钩子函数的输入
在我们最开始的示例中，我们已经介绍了 useQuery 中的 query 和 variables 参数，那么除此之外，它还支持哪些输入呢？
query- 必填，用于指定 GraphQL 查询；variables- 用于指定查询参数；fetchPolicy- 指定数据获取策略；errorPolicy- 指定错误处理策略；skip- 指定查询是否立即执行；displayName- 指定用于调试的组件名称。
useMutation
useMutation 钩子函数用于执行 GraphQL 中的变更操作，它有两个参数，一个是变更操作，另一个是钩子的输入。
在下面的示例中，我们将使用 useMutation 钩子来添加一个新的书籍记录：
------ - ----------- - ---- ---------------------
----- -------- - ----
-------- --------------- -------- -------- -------- -
-------------- ------- ------- -------- -
--
-----
------
-
-
--
-------- --------- -
----- --------- - ---- -- - ----------------------
----- ------------ - -- -- -
--------- ---------- - ------ -- --- ------ ------- --- ------- - ---
--
------ -
-----
------- -------------------------- --- -------------
----- -- -
-----
-----------------------------
----------------------------
------
--
------
--
-useSubscription
最后一个钩子函数 useSubscription 用于在 WebSocket 上订阅 GraphQL 数据流。
在这个示例中，我们将订阅一个聊天室的消息数据流：
------ - --------------- - ---- ---------------------
----- ----------------- - ----
------------ ------------------------- ---- -
------------ -------- -
--
-------
---- -
----
-
-
-
--
-------- ---------- ------ -- -
----- - ---- - - ---------------------------------- -
---------- - ------- ------ --
---
------ -
-----
---------- --
------------------- -- -
---- -------------
----------------------- -------------
------
---
------
--
-总结
在该教程中，我们介绍了如何安装、使用 react-apollo-hooks npm 包，以及其提供的钩子函数，我们看到使用它们能够轻松快速地获取 GraphQL 查询，执行变更操作，以及订阅数据流。
这个 npm 包非常有用，如果您正在使用 Apollo 进行 GraphQL 开发，我强烈建议您试用一下它。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/the-react-apollo-hooks