简介
GraphQL 是一个用于大型 Web 应用程序的查询语言。这款由 Facebook 首席技术官 Mark Zuckerberg 发明的工具，现在已经成为了许多 Web 应用程序的主流选择。GraphQL 帮助前端开发人员避免了传统 REST 结构的某些缺陷，使得前端和后端开发可以更加紧密地结合。本教程向您介绍如何在您的 Web 应用程序中使用 GraphQL，并且提供了一些实用的示例代码。
GraphQL 基础
GraphQL 基本上就是一个 API 查询语言，它允许您精确地指定应用程序所需要的数据，而无需在返回数据的过程中再次查询。GraphQL 的配置包括模型定义、模式构建以及查询和变更。
模型定义
GraphQL 模型定义包括定义对象类型、页面、枚举以及联合类型。下面是一个用于定义 GraphQL 模型的代码：
---- ---- - --- --- ----- ------- ------ ------- - ---- ----- - ------------ ------- --------------- ----- ---- - ---- -------- - ------------- -------- ------ --------- ----- -------------- ---- ----- -------- ------ --------- ----- -------------- ----- -------- -
在这个例子中，我们定义了一个名为 User 的对象类型。它有三个字段：id、name 和 email。我们还定义了一个包含 getAllUsers 和 getUserById 查询的 Query 类型以及一个包含 addUser、updateUser 和 deleteUser 变更的 Mutation 类型。
模式构建
GraphQL 模式构建定义了如何组织您的应用程序的数据，以及如何将数据查询或更新传递到后端。这里有一个用于构建 GraphQL 模式的代码：
------ - ------ ----- --------- -------- -
在这个例子中，我们定义了一个 schema，它包含了一个指向 Query 类型和 Mutation 类型的 query 和 mutation。
查询和变更
GraphQL 查询和变更是您与服务器交互的方式。下面是一个查询的例子：
----- -
----------- -
--
----
-----
-
-在这个例子中，我们查询了服务器上的所有用户，并要求返回他们的 id、name 和 email 字段。
下面是一个变更的例子：
-------- -
------------- -------- ------ -------------------- -
--
----
-----
-
-在这个例子中，我们向服务器添加一个用户，然后查询返回它的 id、name 和 email 字段。
GraphQL 在 Web 应用程序中使用的示例
下面是一些使用 GraphQL 的实际应用程序中的示例。
使用 React 和 Apollo 客户端查询
React 是一个流行的前端框架，它可以方便地处理大量数据的可视化。使用 Apollo 客户端，React 可以方便地查询 GraphQL 数据。下面是一个使用 React 和 Apollo 客户端进行查询的例子：
------ ----- ---- --------
------ - ---- -------- - ---- -----------------
----- --------- - ----
----- -
----------- -
--
----
-----
-
-
--
-------- ------- -
----- - -------- ------ ---- - - --------------------
-- --------- -
------ ------------------
-
-- ------- -
------ -------- -------
-
------ -
----
---------------------------- -- -
--- --------------
--------------------
-------------------
-----
---
-----
--
-
------ ------- ------在这个例子中，我们导入 Apollo 的 useQuery hook，并使用它来查询所有用户。如果查询正在加载，我们将显示一个“loading”消息。如果发生错误，我们将显示一个错误消息。如果查询成功，我们将显示一个列表，其中包含所有用户的名称和电子邮件地址。
使用 Node.js 和 express.js 实现 GraphQL API
Node.js 和 express.js 是用于构建 Web 应用程序的流行工具。使用 express-graphql 中间件，我们可以方便地在 Node.js Web 应用程序中实现 GraphQL API。下面是一个使用 Node.js 和 express.js 实现 GraphQL API 的代码示例：
----- ------- - -------------------
----- - ----------- - - ---------------------------
----- - ----------- - - -------------------
----- ------ - -------------
---- ---- -
--- ---
----- -------
------ -------
-
---- ----- -
------------ -------
--------------- ----- ----
-
---- -------- -
------------- -------- ------ --------- -----
-------------- ---- ----- -------- ------ --------- -----
-------------- ----- --------
-
---
----- ------------ - -
------ -
-
--- ----
----- --------
------ --------------------
--
-
--- ----
----- ------
------ ------------------
--
--
--
----- ---- - -
------------ -- -- -
------ -------------------
--
------------ -- -- -- -- -
------ ------------------------------ -- ------- --- ----
--
-------- -- ----- ----- -- -- -
----- -- - -------------------------------- - ---
----- ---- - -
---
-----
------
--
------------------------------
------ -----
--
----------- -- --- ----- ----- -- -- -
----- ---- - ------------------------------ -- ------- --- ----
--------- - -----
---------- - ------
------ -----
--
----------- -- -- -- -- -
----- ----- - ----------------------------------- -- ------- --- ----
-------------------------------- ---
------ -----
--
--
----- --- - ----------
--------
-----------
-------------
-------
---------- -----
--------- -----
--
--
---------------- -- -- -
-------------------- - ------- --- ------ -- --------------------------------
---在这个例子中，我们定义了一个 GraphQL 模式和一个 root 对象，然后将它们传递到 express-graphql 中间件中。所有的查询和变更都将通过中间件发送到服务器。
结论
GraphQL 是一款强大的工具，它可以帮助前端和后端开发人员更加紧密地结合。使用 GraphQL，您可以精确地指定应用程序所需要的数据，而无需再次查询。无论您正在构建什么样的 Web 应用程序，GraphQL 都是一个强大的选择。在本教程中，我们介绍了 GraphQL 的基础知识，并提供了一些实用的代码示例。如果您正在构建 Web 应用程序，考虑使用 GraphQL 来帮助您更快地构建更好的应用程序。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/673559f70bc820c5824de768