GraphQL 是一种用于 API 的查询语言，可以让客户端精确地指定需要的数据。React 是目前最受欢迎的前端框架之一，它提供了构建交互式用户界面所需的工具。当这两种技术结合使用时，可以创建出高效、灵活和易于维护的 Web 应用。
本文将介绍使用 React 和 GraphQL 开发 Web 应用的最佳实践。我们将从创建一个 GraphQL API 开始，然后使用 React 来处理和展示数据。我们将讨论如何使用 Apollo 客户端来管理查询和状态，如何使用 GraphQL 的模式（Schema）和类型系统，以及如何处理复杂的查询和变异。
创建 GraphQL API
首先，我们需要创建一个 GraphQL API 以便从客户端访问数据。我们可以使用任何支持 GraphQL 的服务，比如 AWS AppSync、Hasura，或者自己构建一个 GraphQL 服务器。在这里，我们将使用 Apollo Server 来创建我们的 GraphQL API。
安装 Apollo Server
我们可以使用 npm 来安装 Apollo Server：
--- ------- -------------
创建 Schema
在创建 GraphQL API 时，首先需要定义一个 Schema，它描述了可用的查询和变异。我们可以使用 GraphQL 的 Schema Definition Language (SDL) 来定义 Schema。以下是一个简单的示例：
---- ----- - ------ ------ - ---- -------- - ------------------- --------- ------ - ------ - ------ ----- --------- -------- -
这个 Schema 定义了一个名为 hello 的查询字段，它返回一个字符串。还定义了一个名为 addMessage 的变异字段，它接受一个字符串作为参数，并返回一个字符串。
创建 Resolvers
Schema 定义了可用的查询和变异，但是我们还需要一个 Resolver 函数来处理这些查询和变异。Resolver 函数是执行实际查询或变异逻辑的地方。
以下是 Resolver 函数的示例：
----- --------- - -
------ -
------ -- -- ------ --------
--
--------- -
----------- -------- - ------- -- -- -
-- ---------
------ --------
--
--
--这个 Resolver 函数实现了 hello 查询和 addMessage 变异的逻辑。在这里，我们只是返回一些硬编码的值。
启动 Apollo Server
现在我们可以启动 Apollo Server，并将 Schema 和 Resolvers 传递给它：
----- - ------------ - - -------------------------
----- -------- - -
---- ----- -
------ ------
-
---- -------- -
------------------- --------- ------
-
------ -
------ -----
--------- --------
-
--
----- --------- - -
------ -
------ -- -- ------ --------
--
--------- -
----------- -------- - ------- -- -- -
-- ---------
------ --------
--
--
--
----- ------ - --- -------------- --------- --------- ---
----------------------- --- -- -- -
------------------- ----- -- ---------
---现在我们可以通过 http://localhost:4000 访问 GraphQL API。在浏览器中打开该 URL，会看到我们定义的 hello 查询和 addMessage 变异。
使用 React 和 Apollo 客户端
现在我们已经创建了一个 GraphQL API，可以从客户端访问它。我们将使用 React 和 Apollo 客户端来处理和展示数据。
安装 React 和 Apollo 客户端
我们可以使用 npm 安装 React 和 Apollo 客户端：
--- ------- ----- ------------ ------------------- -------
创建 Apollo 客户端
首先，我们需要创建一个 Apollo 客户端来处理我们的 GraphQL 查询和变异。我们可以使用 Apollo Boost 来快速设置一个默认配置的客户端：
------ ------------ ---- --------------- ----- ------ - --- -------------- ---- ------------------------ ---
在 React 中使用 Apollo 客户端
现在，我们可以将客户端传递给 React，并使用 useQuery 和 useMutation 钩子来处理 GraphQL 查询和变异。
以下是一个基本的组件，它可以查询并展示 hello 查询的结果：
------ ----- ---- --------
------ - -------- - ---- ----------------------
------ --- ---- --------------
----- ----------- - ----
----- -
-----
-
--
-------- ----- -
----- - -------- ------ ---- - - ----------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ ----------------------
-
------ ------- ----在这里，我们使用 useQuery 钩子来执行 HELLO_QUERY 查询。如果正在加载查询，则显示 "Loading..."，如果有错误，则显示 "Error :("。否则，我们将展示返回的字符串。
以下是一个基本的组件，它可以添加一条消息：
------ ------ - -------- - ---- --------
------ - ----------- - ---- ----------------------
------ --- ---- --------------
----- -------------------- - ----
-------- -------------------- -------- -
------------------- ---------
-
--
-------- ------------ -
----- --------- ----------- - -------------
----- ------------ - --------------------------------- -
---------- - ------- --
------- ------- - ----- - ---------- - -- -- -
----------------- ----- - --------- ---------- - ---
--
---
-------- --------------- -
-------------------
-------------
-
-------- --------------- -
---------------------------
-
------ -
----- ------------------------
------ --------------- ----------------------- --
------- ----------------- ----------------
-------
--
-
------ ------- -----------在这里，我们使用 useMutation 钩子来执行 ADD_MESSAGE_MUTATION 变异。我们将 message 变量作为变异的参数传递，然后在 update 回调函数中更新 Apollo 缓存以反映刚刚添加的消息。
完成了数据的获取和处理后，我们可以在 React 组件中使用这些数据。
总结
本文中，我们介绍了使用 React 和 GraphQL 开发 Web 应用的最佳实践。我们创建了一个 GraphQL API，并使用 Apollo 客户端来处理查询和变异。我们还讨论了使用 GraphQL 的模式和类型系统，以及如何处理复杂的查询和变异。最后，我们将数据传递给 React 组件并展示它们。
如果您刚开始学习 React 和 GraphQL，这些示例可能有点复杂。但是一旦你掌握了这些技术，你将可以轻松地构建出高效、灵活和易于维护的 Web 应用。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64a77c7c48841e98943fceae