GraphQL 是一种快速、高效、灵活的查询语言，用于构建 API。它提供了一种强大的方式来描述数据的形状，使得客户端可以精确地指定需要从 API 中获取的数据。Apollo Client 是一个用于 React 应用程序的完整 GraphQL 客户端，用于管理查询和本地状态。在本文中，我们将介绍如何在 React 应用程序中使用 Apollo Client 和 GraphQL，并提供一些示例代码，以帮助您更好地理解这些概念。
1. 安装和设置 Apollo Client
要在 React 中使用 Apollo Client，首先需要安装它。可以通过以下命令在项目中安装它：
--- ------- ------------ ------------ -------
这将安装 Apollo Boost，它是一个官方推荐的 Apollo 客户端。它结合了一些常见的组件，使设置变得更加容易。它还使用了最常见的默认设置，以便尽快使用。
接下来，您需要为客户端创建一个实例。在 React 中，您可以将它放在 index.js 文件中。下面是一个基本的 Apollo 客户端实例的代码示例：
------ ------------ ---- ---------------
------ - -------------- - ---- ---------------
----- ------ - --- --------------
---- -------------------------
---
----------------
--------------- ----------------
---- --
------------------
-------------------------------
--在上面的代码中，ApolloProvider 组件是必要的，因为它会将客户端传递给所有其他组件。client 是一个 ApolloClient 的实例，其中 uri 是您的 GraphQL 服务的 URL。
2. 查询数据
一旦设置好 Apollo Client，就可以使用 GraphQL 查询数据了。要执行查询，您需要编写 GraphQL 查询语句。查询语句指定要从服务器获取的数据，以及如何组织和筛选这些数据。
下面是一个基本的 GraphQL 查询的代码示例：
------ - --- - ---- ---------------
------ - ----- - ---- ---------------
----- ------------- - ----
----- -
----- -
--
-----
----
-
-
--
----- -------- - -- -- -
------ ----------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
----- ----- - -----------
------ -
----
--------------- -- -
--- --------------
---------------------
------------------
-----
---
-----
-
--
--------
--在上面的代码中，GET_ALL_POSTS 是一个 GraphQL 查询语句，用于从服务器获取所有帖子的 ID、标题和正文字段。使用 Query 组件将查询传递给 Apollo Client 并执行查询。当加载数据时，需要显示适当的信息。
3. 编写变异
GraphQL 变异用于更新或删除数据。变异指定要更改的数据及其新值。下面是一个基本的 GraphQL 变异的示例代码：
------ - --- - ---- ---------------
------ - -------- - ---- ---------------
----- -------- - ----
-------- --------------- -------- ------ -------- -
-------------- ------- ----- ------ -
--
-----
----
-
-
--
----- ----------- - -- -- -
--- ----------- ----------
------ -
--------- --------------------
---------- - ---- -- -- -
----- ----------- -- -
-------------------
--------- ---------- - ------ ----------------- ----- --------------- - ---
---------------- - ---
--------------- - ---
---
------ --------- -- - ---------- - ----- -- --
--------- --------- -- - --------- - ----- --------------
------- ----------------- -------------
-------
--
-----------
--
--在上面的代码中，ADD_POST 是一个 GraphQL 变异，用于添加新的帖子。使用 Mutation 组件将变异传递给 Apollo Client 并执行变异。表单的 onSubmit 函数触发变异，并将表单的数据传递给变异。添加帖子后，表单将清空。
4. 使用本地状态
Apollo Client 还允许您管理本地状态。您可以使用它来存储和访问应用程序的状态，而无需将其存储在服务器上。下面是一个使用本地状态的示例代码：
------ - --- - ---- ---------------
------ - ------ -------- - ---- ---------------
----- ----------- - ----
----- -
------- -------
-
--
----- ----------------- - ----
-------- ---------------- -
---------------- -------
-
--
----- ------- - -- -- -
----------------
------ --------------------
--- ---- -- -- ----------- -------------------
--------
--------- -----------------------------
----------------- -- -
------- ----------- -- --------------------------------------
--
-----------
-----------------
-
----- ------ - --- --------------
---- --------------------------
------ --- ----------------
---------- -
--------- -
----------------- --- --- - ----- -- -- -
----- - ------- - - ----------------- ------ ----------- ---
----- ---------- - ------- - --
------------------ ------ ------------ ----- - -------- ---------- - ---
-
-
-
---在上面的代码中，GET_COUNTER 查询本地状态中的 counter 值，并显示它。INCREMENT_COUNTER 变异增加 counter 的值。在本地 Apollo Client 中，您需要提供 resolvers，在其中描述如何执行变异。在上面的 resolvers 中，incrementCounter 变异读取当前值，增加它并写入回客户端。
结论
在本文中，我们介绍了如何在 React 中使用 Apollo Client 和 GraphQL。我们讨论了如何查询数据、编写变异和使用本地状态。通过使用 Apollo Client 和 GraphQL，您可以提高应用程序的开发效率并改善用户体验。我们希望这篇文章可以帮助您更好地理解这些概念，并在应用程序中使用它们。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/672010aa2e7021665e009361