在前端开发中，使用 GraphQL 是一种越来越常见的方式来处理数据请求。同时，在 React 中也有一个非常好用的包可以用来处理 GraphQL 请求，那就是 React-Apollo。在本文中，我们将详细讲解如何使用 React-Apollo 来进行 GraphQL 数据请求，并为大家提供示例代码。
简介
React-Apollo 是 Apollo Client 的 React 组件库。它提供了一种简单的方式来使你的 React 应用和 GraphQL 后端进行交互。使用 React-Apollo，你可以轻松地将 GraphQL 查询和组件进行关联，并异步获取数据。同时，它还支持几个附加功能，例如缓存和 SSR（服务端渲染）。
接下来，我们将为大家介绍如何在 React 中使用 React-Apollo 进行 GraphQL 数据请求。
安装 React-Apollo
在使用 React-Apollo 之前，你需要先安装它。你可以使用 npm 或 yarn 来安装它，具体命令如下：
npm install react-apollo apollo-boost graphql # 或 yarn add react-apollo apollo-boost graphql
创建 Apollo Client 实例
在使用 React-Apollo 进行 GraphQL 数据请求之前，我们需要先创建一个 Apollo Client 实例。在这个实例中，我们需要设置 GraphQL API 的 endpoint，同时也可以设置缓存等相关信息。具体示例如下：
import ApolloClient from 'apollo-boost';
const client = new ApolloClient({
uri: 'YOUR_GRAPHQL_API_ENDPOINT',
// 设置缓存等相关信息
});创建 GraphQL 查询
接下来，我们需要创建一个 GraphQL 查询。在 React-Apollo 中，你可以使用 gql 函数来定义你的 GraphQL 查询。例如：
-- -------------------- ---- -------
------ - --- - ---- ---------------
----- --------- - ----
----- -
----- -
--
----
---------
-
-
--使用 Query 组件获取数据
有了上述准备之后，我们就可以开始通过 React-Apollo 发送 GraphQL 请求。React-Apollo 提供了一个 Query 组件，这个组件可以帮助我们将组件和 GraphQL 查询关联在一起，并获取返回结果。具体可以参考以下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ - --------- - ---- ------------
----- ----- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ ----------------
----- - ----- - - -----
------ -
----
------------- --- ----- --------- -- -- -
--- ---------
-------------------
------ --------------- ------------------- -------- --
-----
---
-----
--
--
--------
--
------ ------- ------在以上示例代码中，我们通过 Query 组件来发送 GraphQL 查询，同时根据请求状态，展示不同的 UI。如果请求正在加载中，我们展示 "Loading..."；如果请求返回了错误，我们展示 "Error..."；如果请求成功返回了数据，我们展示一个 todo 列表，并将这些数据用来渲染我们的组件。
Mutation 组件用于修改数据
在上述示例中，我们展示了如何使用 Query 组件获取数据。除了获取数据之外，我们也可以使用 Mutation 组件来修改数据。它也提供了类似于 Query 组件的方式来异步调用 GraphQL mutations。具体用法可以参考以下示例代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------
------ - -------- - ---- --------------
----- ------- - -- -- -
--- ------
------ -
--------- --------------------
---------- - ---- -- -- -
-----
----------- -- -
-------------------
--------- ---------- - ----- ----------- - ---
----------- - ---
--
-
------
--------- -- -
----- - -----
--
--
------- ----------------- -------------
-------
--
-----------
--
--
------ ------- --------在以上示例代码中，我们通过 Mutation 组件来发送 GraphQL query，同时也根据请求状态，展示不同的 UI。这里我们展示一个表单来提交待办事项，其中 addTodo 函数用于提交表单数据。
总结
在这篇文章中，我们学习了如何在 React 中使用 React-Apollo 进行 GraphQL 数据请求。我们了解了它的基础用法和如何通过 Query 和 Mutation 组件来获取和修改数据。希望这篇文章能够对大家有所帮助！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af56b648841e9894b5ef43