GraphQL 是一种用于 API 开发的查询语言和规范，它允许客户端精确地指定需要的数据。与 REST API 不同，它具有更高的灵活性和可扩展性，使得前端可以更加有效地管理 API 中的数据。
Apollo Client 是一个功能丰富的 GraphQL 客户端，它可以与 React 紧密集成，为我们提供了许多可以简化前端开发的工具和方法。
安装
在开始构建 React 和 GraphQL 应用程序之前，需要先安装一些必要的软件包。请确保已经安装了以下软件包：
接下来，我们可以使用以下命令来创建一个新的 React 应用程序：
npx create-react-app my-app cd my-app
安装 Apollo Client 和相关依赖项：
npm install --save apollo-boost graphql react-apollo
配置
在 React 应用程序中使用 Apollo Client 时，需要对其进行配置。可以使用 ApolloProvider 组件来提供 Apollo 客户端的使用。这个组件需要以下属性：
client: Apollo 客户端实例
在 index.js 文件中，我们可以使用以下代码来创建一个 Apollo 客户端实例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ --- ---- --------
------ - -------------- - ---- ---------------
------ ------------ ---- ---------------
----- ------ - --- --------------
---- --------- --- ------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在上面的代码中，我们创建了一个 Apollo 客户端实例，并将其传递给 ApolloProvider 组件。我们需要将 <GraphQL 服务器 URL> 替换为实际的 GraphQL 服务器 URL。
查询数据
使用 Apollo Client 时，我们可以使用 Query 组件来发出 GraphQL 查询。这个组件需要以下属性：
query: GraphQL 查询语句children: 渲染函数，用于渲染查询结果
在以下代码中，我们将查询一个用户的用户名和电子邮件。使用模板字符串定义 GraphQL 查询语句，并将其作为 query 属性传递给 Query 组件。在 children 属性中，我们使用渲染函数返回查询结果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----- - ---- ---------------
------ --- ---- --------------
----- -------- - ----
----- ------- -
---- -
----
-----
-
-
--
----- ---- - -- -- -
------ -----------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
----- - ----- ----- - - ----------
------ -
-----
-------- ----------
--------- -----------
------
--
--
--------
--
------ ------- -----更新数据
在应用程序中，我们可能需要更新数据并将其提交到服务器上。我们可以使用 Apollo Client 中的 Mutation 组件来完成这个任务。这个组件需要以下属性：
mutation: GraphQL 变异语句update: 函数，用于在修改数据后更新缓存onCompleted: 函数，当变异完成时调用
在以下代码中，我们将更改用户的电子邮件地址。使用模板字符串定义 GraphQL 变异语句，并将其作为 mutation 属性传递给 Mutation 组件。在 update 属性中，我们将 email 赋值给新的值。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------- - ---- ---------------
------ --- ---- --------------
----- ------------ - ----
-------- ------------------ -------- -
----------------- ------- -
----
-----
-
-
--
----- -------- - -- -- -
--- ------
------ -
---------
-----------------------
--------------- - ----- - ---------- - -- -- -
------------------
------ ---------
----- - ----- ---------- --
---
--
-
------------- - ---- -- -- -
-----
-----
----------- -- -
-------------------
------------ ---------- - ------ ----------- - ---
----------- - ---
--
-
------
--------- -- -
----- - -----
--
--
------- -------------------- --------------
-------
------
--
-----------
--
--
------ ------- ---------总结
在本文中，我们介绍了如何使用 GraphQL 和 Apollo Client 构建 React 前端。我们学习了如何配置 Apollo 客户端、发出 GraphQL 查询和更新数据并将其提交到服务器上。GraphQL 和 Apollo Client 为前端开发带来了更高的灵活性和可扩展性，帮助开发人员更加有效地管理 API 中的数据。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a23d8b48841e9894e8fe1d