在前端开发过程中，我们经常会使用到 GraphQL 来处理数据请求。而在 React 中，一个常见的流行库就是 react-apollo-graphql，它提供了一种简单而强大的方式来在 React 应用中使用 GraphQL。
本文将详细介绍如何使用 npm 包 react-apollo-graphql，包括安装、启动和实际使用的具体步骤和示例代码。
什么是 react-apollo-graphql？
react-apollo-graphql 是一个为 React 应用提供与 GraphQL API 通信的 npm 包。该包将 Apollo Client 集成到 React 应用中，提供了一个提供了 GraphQL 查询、变量注入、本地状态管理以及 SSR（Server-Side Rendering）等强大功能的 React 高阶组件（HOC）。
使用 react-apollo-graphql，我们可以更加方便地在 React 应用中处理数据请求，简化开发流程，提升开发效率。
安装 react-apollo-graphql
我们可以通过 npm 来直接安装 react-apollo-graphql：
npm install react-apollo graphql apollo-boost
其中：
- apollo-boost 是一个小型、零配置的 Apollo 客户端，可以帮助我们轻松地集成其他相关包；
- graphql 是一个用于定义、查询和操作 API 数据的查询语言；
- react-apollo 是一个在 React 中使用 Apollo 的正式 API。
当安装完成之后，我们就可以开始使用该包了。
启动 react-apollo-graphql
我们首先需要创建一个 Apollo Client 实例，并将其作为 props 传递给我们的 React 应用，以便应用程序能够使用该实例来执行 GraphQL 查询。
在创建 Apollo Client 实例时，我们需要指定一个 GraphQL 端点 URL（可以是本地服务器或远程 API）。我们还需要定义一个缓存对象，以便在我们需要从 Apollo Client 中提取数据时使用。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- --------------------------
------ --- ----------------
---
----------------
--------------- ----------------
---- --
------------------
------------------------------
--在这个 React 应用程序中，我们将 ApolloClient 做为 props 传递给 ApolloProvider 组件，在该组件内部，它是由 React Apollo 提供的，它充当了应用程序的数据存储库。
使用 react-apollo-graphql
我们可以在 React 组件中使用 graphql 高阶组件将 GraphQL 查询或者变异注入到该组件中。该高阶组件可以将 GraphQL 查询或变异的响应作为 props 传递给子组件，以便子组件可以利用这些数据。
下面是一个简单的示例代码：
-- -------------------- ---- -------
------ - ------- - ---- ---------------
------ --- ---- --------------
----- ----------- - -- ----- - -------- ------ ----- - -- --
------- - -
-----------------
- - ----- - -
--------- --------------------
- - -
-----
--------------- -- -
---- --------------
------------------
------
---
------
--
----- ------- - ----
----- -
----- -
--
----
-
-
--
------ ------- ------------------------------在这个代码中，我们首先使用 graphql（从 react-apollo 包中导入） 来将我们的 GraphQL 查询注入到 MyComponent 组件中。我们首先将查询作为参数传递给该函数，然后该函数返回一个新的组件，该组件将响应作为 data props 传递给子组件。
在 MyComponent 组件中，我们使用 data props 所提供的信息（loading 和 error 状态）来渲染不同的组件视图。如果数据正在加载中，我们显示 "loading" 文本。如果发生了错误，我们显示 "error" 文本，否则我们显示返回的数据。
结论
在本文中，我们介绍了如何使用 npm 包 react-apollo-graphql 来在 React 应用中使用 GraphQL。我们查看了 react-apollo-graphql 的安装和配置，并提供了一个示例代码，演示了如何在 React 组件中使用 graphql 高阶组件来收发数据。
借助 react-apollo-graphql，我们可以更加简单、高效的利用 GraphQL，并以强大的方式为应用程序提供数据处理功能，使得开发者可以更加专注于业务的实现。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005600e81e8991b448dde63