GraphQL 是一种用于 API 的查询语言，它是由 Facebook 开发的。GraphQL 可以让前端开发人员在获取数据时更加灵活，因为它允许开发人员指定所需的数据，而不是像 REST API 那样获取所有数据。在本文中，我们将探讨在 Node.js 和 React 中使用 GraphQL 的完整指南。
什么是 GraphQL？
GraphQL 是一种用于 API 的查询语言，它是由 Facebook 开发的。GraphQL 允许前端开发人员指定所需的数据，而不是像 REST API 那样获取所有数据。GraphQL 还具有以下优点：
- 可以让客户端指定所需的数据，而不是服务端决定返回哪些数据。
- 可以减少网络传输的数据量，因为客户端只获取所需的数据。
- 可以让客户端查询多个资源，而不是像 REST API 那样需要多个请求。
- 可以让客户端指定数据的深度和层次结构。
在 Node.js 中使用 GraphQL
在 Node.js 中使用 GraphQL 需要安装以下软件包：
- graphql：GraphQL 的 JavaScript 实现。
- express-graphql：用于将 GraphQL 添加到 Express 应用程序中。
- graphql-tools：用于创建 GraphQL schema。
以下是在 Node.js 中使用 GraphQL 的基本步骤：
步骤 1：安装软件包
在终端中运行以下命令安装软件包：
--- ------- ------- --------------- -------------
步骤 2：创建 schema
在 GraphQL 中，schema 定义了可用的查询类型和可用的字段。以下是一个简单的 schema：
----- - --- - - ---------------------------------
----- -------- - ----
---- ----- -
------ ------
-
--在上面的 schema 中，我们定义了一个名为 Query 的类型，它具有一个名为 hello 的字段，该字段返回一个字符串。
步骤 3：创建 resolver
在 GraphQL 中，resolver 定义了如何获取数据。以下是一个简单的 resolver：
----- --------- - -
------ -
------ -- -- ------ --------
--
--在上面的 resolver 中，我们定义了一个名为 hello 的函数，它返回字符串“Hello World!”。
步骤 4：创建 Express 应用程序
在 Express 应用程序中添加 GraphQL。
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - -------------------- - - ---------------------------------
----- -------- - -
---- ----- -
------ ------
-
--
----- --------- - -
------ -
------ -- -- ------ --------
--
--
----- ------ - ---------------------- --------- --------- ---
----- --- - ----------
--------
-----------
-------------
-------
--------- -----
---
--
---------------- -- --
-------------------- ------- ------ --- ------- -- -------------------------
--在上面的代码中，我们创建了一个 Express 应用程序，并将 GraphQL 添加到应用程序中。我们还将 schema 和 resolver 传递给 makeExecutableSchema 函数，该函数将它们合并成一个可执行的 schema。最后，我们将应用程序监听在端口 3000 上。
步骤 5：测试 GraphQL
在浏览器中访问以下 URL：
-----------------------------
在 GraphiQL 界面中，输入以下查询：
- ----- -
点击“运行”按钮，您应该会看到以下响应：
-
------- -
-------- ------ -------
-
-在 React 中使用 GraphQL
在 React 中使用 GraphQL 需要安装以下软件包：
- apollo-boost：用于创建 Apollo 客户端。
- react-apollo：用于将 Apollo 客户端添加到 React 应用程序中。
以下是在 React 中使用 GraphQL 的基本步骤：
步骤 1：安装软件包
在终端中运行以下命令安装软件包：
--- ------- ------------ ------------ -------
步骤 2：创建 Apollo 客户端
在 React 应用程序中创建 Apollo 客户端。
------ ------------ ---- --------------- ----- ------ - --- -------------- ---- -------------------------------- ---
在上面的代码中，我们创建了一个 Apollo 客户端，并将其连接到 GraphQL 服务器。
步骤 3：创建查询
在 React 应用程序中创建查询。
------ - --- - ---- ---------------
----- --------- - ----
-
-----
-
--在上面的代码中，我们创建了一个名为 GET_HELLO 的查询，该查询获取 hello 字段。
步骤 4：将查询添加到组件中
在 React 组件中添加查询。
------ - ----- - ---- ---------------
------ - --------- - ---- ------------
----- ----- - -- -- -
------ ------------------
--- -------- ------ ---- -- -- -
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ --------------------
--
--------
--在上面的代码中，我们使用 Query 组件将查询添加到组件中。我们还根据加载状态和错误状态显示不同的内容。
步骤 5：测试 React 应用程序
在浏览器中访问 React 应用程序，您应该会看到“Hello World!”。
结论
在本文中，我们探讨了如何在 Node.js 和 React 中使用 GraphQL。我们学习了如何创建 schema 和 resolver，并使用 Express 和 Apollo 客户端将 GraphQL 添加到应用程序中。我们还学习了如何在 React 应用程序中使用 Query 组件来获取数据。GraphQL 具有许多优点，可以让前端开发人员在获取数据时更加灵活。我们希望本文能够帮助您开始使用 GraphQL。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67248fbf2e7021665e140b72