前言
近年来，GraphQL 在前端圈内愈发流行，已成为前端工程师必须精通的技术之一。但相信有不少小伙伴和我一样，至今仍然被其所包含的概念、架构和语法所困惑。因此，本篇文章将深入浅出地解析 GraphQL，理清其思路和架构，让大家能够顺利入门、扎实学习。
什么是 GraphQL
GraphQL 是一种针对 API 的查询语言及其运行时，它提供了一个更高效、更强大、更灵活的数据查询解决方案。
GraphQL 最初由 Facebook 于 2012 年开发，用于其网站的移动应用程序。后来，GraphQL 作为一个开源项目提供了实现，以 .GraphQL 文件形式定义的 GraphQL 服务可以使用各种语言进行实现。
GraphQL 的工作原理是使用类型定义来描述客户端可以请求的数据。客户端可以定义其需要的数据集，而服务器将返回该数据集的精确版本，即客户端请求的数据精确等同于服务器返回的数据集，避免了传统 RESTful API 中常常存在的“过度获取”或“过度筛选”问题。
GraphQL 的基本语法
GraphQL 的类型系统
GraphQL 的类型系统非常适合描述应用程序的数据模型，Types 定义了数据模型的结构，以及如何连接数据的方式。类型系统非常明确，则可以快速地理解应用程序必需的查询，并确保所有都可以缺省值。
类型定义的基本形式如下：
-- -------------------- ---- ------- ---- ----- - ----- ---- - ---- ---- - --- -- ----- ------- ------ ------- -
类型定义主要分为以下几种：
- Scalar 类型：表示 GraphQL 基本类型，包括 Int、String、Float 和 Boolean 等。
- Object 类型：表示为 GraphQL 服务中提供的对象，数据被封装在该对象中，并且该对象具有关联的详细信息。
- Enumeration 类型：表示为一组可枚举的值，GraphQL 使开发人员可以定义预期值的有效选项，并对 API 发出警告。
- List 和 Non-Null 类型：仅仅为基本类型和对象类型定义作用，非空表示该字段在没有值时会报错，List 表示该字段支持返回多个条目。
GraphQL 查询语句
GraphQL 查询语句非常类似于 JavaScript 对象的语法，这也是 GraphQL 最具有吸引力的特性之一。客户端使用查询语句，指示服务器返回指定的数据。查询语句的返回值与 Types 有关。
查询语句的基本形式：
query {
user {
name
email
}
}在上述例子中，查询语句请求 user 的用户数据。result 将顺序包含 user 的名字和电子邮件地址。如果客户端需要返回自己定义的自定义类型，则语法类似：
-- -------------------- ---- -------
----- -
-------- -
----
-----
---
------- -
----
-------
-
-
-GraphQL 基本操作
- 查询语句（Query）：查询语句用来获取需要的数据。GraphQL 在查询数据时使用 query 关键字。
query {
user {
name
email
}
}查询语句的结果：
{
"data": {
"user": {
"name": "Linda",
"email": "linda@gmail.com"
}
}
}- 变量（Variable）：变量在具有可变参数的 GraphQL 操作中非常有用。使用 $ 加变量名定义变量，在查询中使用变量名，使用键入变量定义的值，然后传递它们到变量之后的操作。
query Fetch($input: [String]){
search (input: $input) {
name
email
}
}- 碎片（Fragment）：碎片是用于组合多个字段的结构。这些字段可以通过其他查询、碎片或基本类型定义来创建。可以使用三个点 ... 具有相同类型的对象，将其作为查询（和参数）设置的范围之一。
-- -------------------- ---- -------
----- -
---- -
-------------
---
-
-------- -
-----------------
----
-
-
-------- ---------- -- ---- -
----
-----
-
-------- -------------- -- -------- -
---------
--------
-- 别名（Alias）：当查询两个字段有相同名称时，需要使用别名来防止出现语法错误。别名始终在离开外部括号之前以 ":" 为前缀。
query {
user {
firstName: name
lastName: surname
}
}GraphQL 的优势
- 精确地明确需要查询的数据。
- 启用数据现场的提供和组合，可以消除 REST API 的过度调用，从而提高性能。
- 利用 Types 将数据编码到 API 架构中。
- 以补充的方式结构化数据。
- 强制完整的数据模型，使前端开发人员更准确地了解和使用数据模型。
GraphQL 的示例代码
- 查询语句：
query search($book: String){
search(book: $book) {
title
author
}
}查询结果：
-- -------------------- ---- -------
-
------- -
--------- -
-
-------- -------------
--------- ------
--
-
-------- -------------------
--------- ------
--
-
-------- -----------
--------- ------
-
-
-
-- 变量：
-- -------------------- ---- -------
----- ------------- --------
------------ ------ -
-----
------
--
----------- -
-----
------
-
-变量：
{
"book": "JavaScript"
}变量结果：
-- -------------------- ---- -------
-
------- -
--------- -
-
-------- -------------------
--------- ------
--
-
-------- -------------------
--------- -----
-
--
-------------- -
-------- -------------------
--------- -----
-
-
-GraphQL 在实际项目中的应用
在现代 Web 开发中，GraphQL 已经成为开发高效可靠的 API 的一种重要工具，具有以下优势：
- 基于声明式编程，数据定义更加清晰明确。
- 支持跨平台、多终端的数据传输，易于定制和使用。
- 易于维护和扩展，提高了代码的复用性。
- 提供自由、安全、可扩展的数据查询API接口。
GraphQL 由于其独特的优势已经被越来越多的企业及 Web 开发者所青睐和使用，下面列举了的几个知名公司及产品。
GitHub
GitHub 采用了 GraphQL 而非 RESTful API，其使用情况可谓佐证了 GraphQL 的合理之处。GitHub 的 Web 应用程序通过向 API 发出 GraphQL 查询，根据客户端的查询定义来生成精确地数据。采取“按需加载”的方式，根据需要提供数据，对性能进行优化，并避免对服务器造成过大压力。
Yelp
Yelp 是一家线上评级公司，他们的 Web 应用程序管理了大量的业务数据，例如商户、评论等。他们使用 GraphQL 作为 Web 应用程序的数据查询语言，并使用 GraphiQL 作为他们的适配器。使用 GraphQL 可以根据业务需求来获取精确的数据，非常有效、快速。
GitHub Explorer
GitHub Explorer 是 GitHub 的抽象版，它支持 GraphQL。使用这个 API，开发人员可以从已弃用的 RESTful API 转换过来。它通过将请求和查询分组，可以很容易地进行查询输出的设计和生成。
Apollo
Apollo 是一个 GraphQL 数据框架，该框架实现了客户端到 API的解耦，以便客户端可以更加准确地获取所需数据。通过 Apollo，开发人员可以针对不同的业务需求创建数据库并对其进行查询。
总结
GraphQL 是一种优秀的数据查询解决方案，为客户端和服务端之间的数据传递提供了更好的方式。通过 GraphQL，我们可以更加清晰地定义客户端数据请求，并消除 API 中的一些常见问题，如“过度筛选”和“过度获取”等。现在许多大型在线公司都采用 GraphQL 这一技术进行 Web 开发，因为这种基于声明式编程的方法可提高代码复用性和维护性。因此，能熟练掌握 GraphQL 的技术，对于前端开发者而言意义重大，建议大家尽早学习并掌握。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6519566c95b1f8cacd1838d5