GraphQL 是一种新兴的 API 查询语言，它可以让你更好地组织和获取你的应用程序数据。它可以减少网络请求的数量，并且可以适应复杂的查询。
Apollo 是一个开源的客户端库，它提供了一个现代的、功能强大的 GraphQL 客户端，它可以帮助你轻松地将 GraphQL 集成到你的 React 应用程序中。在这篇文章中，我们将深入探讨如何使用 Apollo 集成 GraphQL 到 React 应用程序中，包括以下内容：
- 安装 Apollo 客户端
- 定义 GraphQL 查询
- 将查询集成到 React 组件中
- 处理加载状态和错误
- 在应用程序中使用 Mutations
安装 Apollo 客户端
首先，我们需要安装 apollo-boost 和 react-apollo，这两个包可以让我们更容易地开始使用 Apollo。
--- ------- ------------ ------------ ------- ------
如果你正在使用 TypeScript，你还需要安装 @types/react-apollo。
定义 GraphQL 查询
定义 GraphQL 查询是使用 Apollo 的第一步。我们可以将查询定义为字符串，也可以使用 GraphQL 语法树。
------ - --- - ---- ---------------
----- --------- - ----
-
----- -
-----
------
-
-
--在这个例子中，我们定义了一个查询来获取所有图书的标题和作者。我们使用 gql 标签将查询字符串转换为一个可执行的查询。
将查询集成到 React 组件中
在 React 中使用 GraphQL 查询非常容易。我们可以使用 Query 组件来包装我们的组件并获取数据。
------ - ----- - ---- ---------------
------ - --------- - ---- ------------
----- -------- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------- ------ ------ -- -- -
---- ------------
--------------
---------------
------
---
--
--------
--在这个例子中，我们将 GET_BOOKS 查询传递给 Query 组件，并使用 loading、error 和 data 来处理加载状态和数据。如果加载中，我们将返回“Loading...”；如果出现错误，我们将返回“Error :(”；如果查询完成，我们将使用 map 将所有图书的标题和作者渲染到页面上。
处理加载状态和错误
在上面的例子中，我们使用 loading 和 error 属性来处理加载状态和错误。如果我们需要更细粒度的控制，我们可以使用 ApolloProvider 和 graphql。
------ - --------------- ------- - ---- ---------------
------ - --------- - ---- ------------
----- -------- - -- ----- - -------- ------ ----- - -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ------------ ------ ------ -- -- -
---- ------------
--------------
---------------
------
---
--
----- ---------------- - -----------------------------
----- --- - -- -- -
--------------- ----------------
----------------- --
-----------------
--在这个例子中，我们使用 graphql 高阶函数将 GET_BOOKS 查询注入到 BookList 组件中。我们可以直接从组件的属性中访问查询结果，而不需要使用 <Query> 组件。这使得代码变得更简洁，同时也可以更容易地控制加载状态和错误。
在应用程序中使用 Mutations
除了查询外，在应用程序中使用 Mutations 也是很常见的。我们可以使用 Mutation 组件来处理 Mutations。
------ - -------- - ---- ---------------
------ - -------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- - -- -- -
--- ------
------ -
---------
-------------------
--------------- - ----- - ------- - -- -- -
----- - ----- - - ----------------- ------ --------- ---
------------------
------ ----------
----- - ------ ----------------------- --
---
--
-
---------- - ---- -- -- -
-----
------------- -- -
-------------------
--------- ---------- - ------ ----------- - ---
----------- - ---
--
-
------
----------- -- -
----- - -----
--
--
------- ----------------- -------------
-------
--
-----------
--
--在这个例子中，我们定义了一个添加图书的 Mutation，并用 update 函数更新了缓存。我们将添加的图书与所有现有的图书合并，并将结果写回缓存。使用 Mutation 组件来处理 Mutations 很容易，它和 Query 组件非常相似。
结论
在本文中，我们深入探讨了如何使用 Apollo 集成 GraphQL 到 React 应用程序中。我们讨论了如何定义 GraphQL 查询、将查询集成到 React 组件中，并处理加载状态和错误。我们还学习了如何使用 Mutations 来更新数据。
Apollo 提供了一个功能强大的 GraphQL 客户端，在开始构建 GraphQL 应用程序时应该考虑使用它。如果您正在使用 React，那么 Apollo 将是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672f1a56eedcc8a97c8c9634