在前端开发中，React 和 Apollo 并非陌生的技术，React 作为一款流行的前端 UI 库，而 Apollo 则是一个优秀的 GraphQL 客户端。
在使用 Apollo 过程中，它提供了许多能力，包括一些钩子函数，但是它的使用有时会让我们感觉繁琐。而在这种情况下，react-apollo-hooks 这个 npm 包的出现为我们提供了便利。
本文将介绍如何使用这个 npm 包，并提供一些示例代码。
安装
首先，在你的 React 项目中安装 react-apollo-hooks 包：
npm install 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
