GraphQL 是一种由 Facebook 创建的查询语言，用于 API 开发，它允许前端通过一次请求获取服务端所提供的需求（点对点）的数据，没有其它的冗余信息和语法难度。在React中使用GraphQL来获取和管理数据可以有效提高前端Web应用程序的性能和可靠性。本文将介绍在 React 中如何使用 GraphQL，包括 Apollo Client 这个库的使用。
GraphQL 客户端
在 React 中使用 GraphQL，我们需要一个 GraphQL 客户端，目前最流行的是 Apollo Client。Aollo Client 是一个用于 React、React Native 和 Node.js 的完整的GraphQL解决方案，它可以帮助我们完成 GraphQL 数据的请求、查询、缓存和更新。
安装 Apollo Client
只需要运行以下命令就可以在 React 中安装 Apollo Client：
npm install --save react-apollo apollo-boost graphql
在 React 中使用 Apollo Client
React 需要从 Apollo 客户端来获取查询信息，需要将所有组件包装在一个组件中。这个组件称为 ‘Apollo Provider’，它将 Apollo Client 实例传递给 React 组件树，这样 React 的所有组件就可以在自己的 props 中访问 Apollo 客户端。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------------- - ---- ---------------
------ - ------------ - ---- ----------------
------ - -------- - ---- -------------------
------ - ------------- - ---- ------------------------
------ --- ---- --------
----- ------ - --- --------------
----- --- ----------- ----------- --- ---
------ --- --------------- ----------- ------------- --- -----
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--使用 GraphQL 针对 React 应用程序发送查询
在 React 中，我们可以使用 Apollo Client 的 ‘Query’ 组件发送 GraphQL 查询。它需要一个 GraphQL 查询字符串，可以将其作为模板字符串编写，一旦组件“挂载”到 DOM 中，组件就会触发一个 GraphQL 请求来获取数据。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ --- ---- --------------
----- --------- - ----
----- ------------- ----- -
------------ ------- - -- ------ --
--
--------
-
-
--
----- ----- - -- ----- - -- -- -- -
------ ----------------- ------------ ----- ---
--- -------- ------ ---- -- -- -
-- --------- ------ ----------------
-- ------- ------ --------- --------------------
------ -
----
-------------------- -- -
--- --------------
---------------
-----
---
-----
--
--
--------
--上面代码展示了如何使用 Apollo Client 在 React 组件中发送一个查询，查询是一个 GraphQL 查询字符串。这里我们查询了前 10 个用户的 ID 和用户名，使用 ‘Query’ 组件包裹我们的数据展示逻辑，如果数据还没有被加载完成，显示 ‘Loading…’，当出现错误时，显示 ‘Error: [error.message]’。
使用 GraphQL 针对 React 应用程序使用好 Schema
好的 Schema 是在 GraphQL 中定义数据结构的方式，一个好的 Schema 包含了项目的所有数据和类型，并且能够轻松更新。在 React 应用程序中，GraphQL 是使 Schema 完整并提高应用程序性能的一种必备工具。此外，好的 Schema 还可以帮助开发人员更快地诊断错误，而无需查看逐个页面的数据载入。
定义 Schema
您需要从最高级别的类型开始定义组成您的应用程序的数据点。例如，在一个简单的列表示例应用程序中，您将定义一个类型称为 ‘Task’。然后，您可以定义一个 'TaskList' 类型，该类型可以将许多 'Task' 对象包含在其中，并为它们创建查询。
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------ - ---- ----- - -------- ----- ---- --------- ------- -
处理依赖关系
在Schema中处理依赖关系是一种展示数据的方式，它可以让开发人员更好地了解代码中的信息流，并使应用程序更容易测试，维护和更新。
例如，如果 Task 类型与 User 类型有关联，您可以将 Task 对象定义为嵌套 User 对象的类型，或者通过将 userID 字段添加到 Task 对象来跟踪其所有者。如果您选择前者，您将需要提供一种查询方式，以便通过 Task 对象查询 User 对象。如下所示：
-- -------------------- ---- ------- ---- ---- - --- --- ------ ------- -------- ------ ------ ----- - ---- ---- - --- --- ---------- ------- --------- ------- - ---- ----- - -------- ----- ---- - ---- --------- - -------- ----- ---- -
‘Task’ 类型中的 ‘owner’ 字段使用了 ‘User’ 类型，因此我们可以查询每个 ‘Task’ 的 ‘User’ 对象。在上面的示例中，我还为用户定义了单独的查询，并将其放在了一个新的 ‘UserQuery’ 操作中。
结论
GraphQL 是一个非常有用的工具，可以让开发人员更轻松地管理代码中的数据，并使编写并测试应用程序更加容易。在 React 中使用 Apollo Client，我们可以更加方便快捷的使用 GraphQL，并使开发 React 应用程序变得更简单，更高效。
在本文中，我们介绍了如何使用 Apollo Client 和 GraphQL 在 React 中管理数据，包括安装 Apollo Client、使用 Query 组件查询数据和在 Schema 中处理依赖关系。希望这篇文章能够对您在开发React应用中使用GraphQL感到有帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6704a624d91dce0dc84fa799