GraphQL 是一种能够简化前端开发的 API 查询语言，通过它我们可以只请求需要的数据，并且可以在同一次 API 请求中获取到多个资源的数据。它也可以解决 RESTful API 中常见的问题，如获取过多或过少的数据、多次请求等等。在此篇文章中，我们将了解 GraphQL 的基本概念和优势，同时给出一些使用 GraphQL 的示例代码以解释其用法。
GraphQL 的概念
查询
GraphQL 查询定义了客户端所需的数据形式，以及如何从服务端获取该数据。查询可以通过类似 JavaScript 对象的形式表示，其中包含了键值对：键表示要获取的数据的名称，值表示该名称下数据的类型。
我们的查询需要传入一些参数以获得指定的数据，然后返回一个对应的数据响应。查询语句也可以嵌套，从而获取与原始查询相关的其他数据。
例如：
-- -------------------- ---- -------
----- ---------------- ---- -
------------ ---- -
--
----
--------- -
--
----
-----
-
-
-上述查询将会返回一个名为 getPlaylist 的 GraphQL 查询，其中包含一个 playlist 域。该域接受参数 id，即播放列表的唯一标识符，同时返回该播放列表的详细信息，包括创建人的详细信息。
变量
变量在传递参数时是相当有用的，它们可以将参数从查询本身中分离，从而更好地控制查询的参数。我们可以将变量定义为一个标记，与查询自身有所不同，然后在查询语句中使用这些变量。
例如：
-- -------------------- ---- -------
----- ---------------- ---- -
------------ ---- -
--
----
-
-
-
----- ----------
-该查询包含了一个带有 id 参数的 playlist 域，实际的 id 值在查询之外的 JSON 对象中定义。在该示例中，我们使用变量 $id 来指定播放列表的唯一标识符。
模式
GraphQL 模式定义了可用于获取数据的类型。在 GraphQL 模式中，每个字段都有一个特定的类型，包括标量类型、对象类型、列表类型等等。
例如，在一个音乐服务中的 GraphQL 模式可能包含以下类型：
-- -------------------- ---- ------- ---- ----- - ------------ ----- --------- -------- ----- ----- - ---- -------- - --- --- ----- ------- ---------- ----- ------ -------- - ---- ---- - --- --- ----- ------- ------ ------ - ---- ----- - --- --- ----- ------- ------- ------- - ---- ------ - --- --- ----- ------- ------ -------- -
在该示例中，Query 类型包含了 playlist 和 song 两个 field，它们分别返回 Playlist 和 Song 类型的数据。Playlist 和 Song 类型分别包含一些不同的字段，如 id、name、createdBy 等等。这些类型以及它们之间的联系为 GraphQL 系统中的所有数据定义了一种类型关系，也称为 GraphQL Schema。
GraphQL 的优势
可定制的数据
GraphQL 可以通过查询控制返回的数据资源，从而使前端开发人员能够精确地控制他们需要的数据，并且减少了不必要的数据传输。这意味着前端开发人员可以轻松地在多个类型的设备上使用相同的 API 来获取数据，而且在一个单一请求中可以获取更多的数据。
快速迭代
GraphQL 允许开发人员轻松地为其数据添加新 functionality，而无需在进行更改时改变 API 的结构。这使得团队中的开发人员可以在不同的数据源上快速迭代和添加功能，而无需改变其 API 的结构。
前后端之间的分离
使用 GraphQL，前端开发人员可以从后端开发人员的限制中解放出来。开发人员只需要指定他们需要的数据，而无需考虑后端数据模型本身的组织与运行，从而在不同的设备类型和屏幕中实现前后端之间的分离。
如何使用 GraphQL
在前端中使用 GraphQL
在前端中，可以使用如下所示的 JavaScript 代码来使用 GraphQL：
-- -------------------- ---- -------
------ - ---- -------- - ---- -----------------
----- ------------ - ----
----- ---------------- ---- -
------------ ---- -
--
----
--------- -
--
----
-----
-
-
-
--
-------- ---------- -- -- -
----- - -------- ------ ---- - - ---------------------- -
---------- - -- --
---
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
---------------------------
-------------------------------------
--------------------------------------
------
--
-上述代码的作用是获取指定播放列表的详细信息，如果响应成功返回则将数据渲染为页面。
在后端中使用 GraphQL
在后端中，可以使用如下所示的代码来实现一个使用 GraphQL 的服务：
-- -------------------- ---- -------
----- - -------- ----------- - - -------------------
----- ------ - -------------
---- ----- -
------ ------
-
---
----- --------- - -
------ -- -- ------ -------
--
--------
-------
-- ----- ---
---------
----------------- -- -
----------------------
---上述代码的作用是创建一个名为 hello 的查询，然后在 graphql 函数中进行调用。
结论
GraphQL 是一个强大的 API 查询语言，它使得前端开发人员能够更好地控制他们所需的数据资源，并且允许他们在多个类型的设备上使用相同的 API 来获取数据。在此篇文章中，我们了解了 GraphQL 的基本概念和优势，同时给出了一些使用 GraphQL 的示例代码以解释其用法。如果你想深入了解这个主题，我们将在未来的文章中继续讨论 GraphQL 的高级用法和工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66eec38f6fbf960197297a1b