GraphQL 是一种用于构建 Web 应用程序的查询语言。它是由 Facebook 开发的，逐渐成为前端领域中的热门技术之一。在 GraphQL 中，客户端可以指定需要从服务器获取的数据，避免了 RESTful API 中所遇到的一些问题，例如过度获取、多次请求等，并使得前端开发变得更加高效和灵活。本文将带您从最基础的开始，详解 GraphQL 的各个方面。
安装 GraphQL
首先，您需要在项目中安装 GraphQL，可使用以下命令：
npm install graphql
定义 schema
在 GraphQL 中，schema（模式）容许了客户端与服务端之间的通信。它定义了客户端可以请求的查询类型和返回的数据类型。下面是一个简单的 schema 定义示例：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
------ ------
-
---
----- ---- - -
------ -- -- ------ -------
--
--------------- -- ----- --- --------------------- -- -
----------------------
---这个 schema 声明了一个 Query 类型，其中有一个 hello 字段，类型为 String，客户端可以请求这个字段。
定义 resolver
resolver 定义的是客户端请求的查询方法，在上面的示例中，hello 已被定义为一个 String 类型，现在我们需要定义它的具体实现。例如：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
------ ------
-
---
----- ---- - -
------ -- -- ------ -------
--
--------------- -- ----- --- --------------------- -- -
----------------------
---这里的 root 对象是一个带有 hello 字段的对象，客户端发起 hello 类型的请求时，会自动调用 root 中对应的方法并将数据返回。
定义查询参数
GraphQL 允许客户端定义参数，类似于函数的参数，它们可以传递给服务器以限制所请求的数据。例如：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
----------------- ----- --------- ----- -----
-
---
----- ---- - -
--------- -- -------- -------- -- -- -
----- ------ - ---
--- ---- - - -- - - -------- ---- -
------------- - ------------------------ - -----------
-
------ -------
-
--
--------------- -- ----------------- -- --------- -- --- --------------------- -- -
----------------------
---这个示例定义了一个 rollDice 方法，它接受两个参数：一个必须的 numDice 参数，表示摇骰子的次数，还有一个可选的 numSides 参数，表示每个骰子的面数。客户端可以调用 rollDice 方法并指定这些参数的值，服务器会根据这些参数生成随机数，供客户端使用。
数据类型
除了 String 和 Int 之外，GraphQL 还定义了许多其他数据类型，例如 list 类型（即数组）和 object 类型。这里有一个例子：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- --------- -
--------- ----
--------- ----
-------------- ------ -----
-
---- ----- -
---------------- ----- ---------
-
---
----- --------- -
--------------------- -
------------- - ---------
-
---------- -
------ - - ------------------------ - ---------------
-
------ -------- -- -
----- ------ - ---
--- ---- - - -- - - --------- ---- -
-----------------------------
-
------ -------
-
-
----- ---- - -
------- -- -------- -- -- -
------ --- ------------------ -- ---
-
--
--------------- -- ---------------- -- - --------- --------- -------------- -- - --- --------------------- -- -
----------------------
---在这个示例中，我们定义了一个 RandomDie 类型，有三个字段：numSides 表示骰子的面数、rollOnce 表示摇一次骰子的结果、roll 表示摇多次骰子的结果。在 Query 类型中，我们添加了一个可以获取 RandomDie 对象的方法：getDie。客户端可以指定一个 numSides 参数来控制骰子的面数。因为 roll 是一个 list 类型，所以我们通过传递一个包含 numRolls 参数的对象来定义请求多次 roll 的情况。
查询嵌套 resolver
在 GraphQL 中，我们可以使用查询嵌套 resolver 来更方便地获取数据库中的相关数据。例如：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
----------- ------ ----
-
---- ---- -
--- ---
----- -------
---- ----
-------- -------
-
---
----- ----- - -
-
--- --
----- -----
---- ---
-------- --- -- --
--
-
--- --
----- -----
---- ---
-------- --- --
--
-
--- --
----- -----
---- ---
-------- --- --
--
-
--- --
----- -----
---- ---
-------- ---
-
--
----- ---- - -
-------- -- -- -- -- -
----- ---- - ----------------- -- ------- --- ----
------------ - --------------------- -- ----------------- -- ------- --- -----
------ -----
-
--
--------------- -- ----------- -- - ----- ---- ------- - ----- --- - - --- --------------------- -- -
----------------------
---在这个示例中，我们为 Query 类型添加了一个 getUser 方法，它接受 id 参数并返回一个 User 类型的对象，包含一个名为 friends 的数组类型，元素也是一个 User 类型的对象。在 resolver 中，我们映射用户对象中的 friends 属性为实际的用户对象。在客户端发起请求时，我们查询 getUser 方法，并选择要显示的字段，以及 friends 数组中的特定属性。
总结
在本文中，我们探讨了 GraphQL 的基础知识，包括如何安装、用 schema 和 resolver 定义查询类型和返回类型、定义查询参数、数据类型、查询嵌套等。通过掌握这些核心概念，您可以更好地使用 GraphQL 在前端开发中实现高效、灵活的数据获取方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ed7416f6b2d6eab379d432