前言
随着互联网技术的发展，前端应用的需求越来越复杂。以往的 REST API 面临的问题是：一次 API 调用返回的数据过于庞大，而前端应用只需要其中一部分，这将导致带宽浪费和响应时间变长。同时，改变一个页面中的某一项数据可能需要多次请求不同的 API，这意味着前端工作要花费更多的时间和精力来编写和维护代码，并且还会面临并行请求的问题。
GraphQL 的出现使前端请求数据变得更加方便和高效。
GraphQL 简介
GraphQL 是什么？
GraphQL 是一种查询语言，作为一个新兴的 API 标准，它可以让前端开发者得到想要的数据，而不需要从多个 API 中获取数据。它提供了一种更加高效、强大和灵活的 API 设计方式，它与前端界面紧密结合，使得前端应用对 API 的使用变得更加简单。
GraphQL 特点
局部查询：在 REST API 中，客户端通常只能通过指定 URL 获取整个资源。GraphQL 查询支持客户端指定需要的数据，使其专注于应用程序的具体需求。
灵活性：GraphQL 有一个强大的类型系统，允许开发者定义复杂的类型和查询语言。
合并数据：GraphQL 允许将多个数据源的查询进行合并，从而可以使查询更加简洁和高效。
增量式开发：GraphQL 中的模式可以随着项目规模的扩大而演化。
GraphQL 基本概念
Schema
在 GraphQL 中，Schema 指的是数据模型，它定义了数据类型、字段、查询和突变。这个模式是为你的应用程序提供服务的 API 的基础。
Query
查询语句是一个从 GraphQL 服务器获取信息的请求，客户端可以使用查询语句来请求特定的数据。
Mutation
变更语句是一条向 GraphQL 服务器发送修改的指令，可用于创建、修改、删除数据。
Resolver
解析器将 Query 和 Mutation 转换为实际的操作，并返回客户端所请求的数据。
GraphQL 与 REST 的比较
数据获取
在 REST API 中，客户端通常只能通过指定 URL 获取整个资源。而在 GraphQL 中，客户端可以定义其需要获取的数据，服务端将其转换为相应的数据结构并返回。
单个请求
在 REST API 中，客户端可能需要多次请求才能获取完整的数据。而在 GraphQL 中，客户端可以通过一次请求获取所有所需的数据。
数据剪枝
在 REST API 中，服务端返回的数据可能会包括过多不必要的信息。而在 GraphQL 中，客户端可以仅请求其需要的信息，提高效率并减少带宽浪费。
GraphQL 示例代码
以下是一个简单的 GraphQL 示例，其中包含一个数据类型（Author），查询一个作者的所有书籍的方法（getBooksByAuthor），以及查询所有作者的方法（getAllAuthors）：
---- ------ -
--- --
----- ------
-
---- ---- -
--- --
------ ------
------- ------
-
---- ----- -
-------------------------- ---- ------
-------------- --------
-
- ----
--- ------- - -
- --- ---- ----- ------ --
- --- ---- ----- ------ -
--
--- ----- - -
- --- ---- ------ ----- --- --------- --- --
- --- ---- ------ ----- --- --------- --- --
- --- ---- ------ ----- --- --------- --- --
- --- ---- ------ ----- --- --------- --- -
--
--- ---------------- - ------------------ -
------ --------------------------- -
------ ------------- --- ---------
---
-
--- ------------- - ---------- -
------ --------
-
- ----
- -- -- - - --------
-
-------------------------- ---- -
-----
-
-
- ------
-
------------- -
----
-
-总结
GraphQL 的出现使前端获取数据变得更加方便和高效。通过在服务端定义 Schema，前端可以精确地指定所需数据，从而提高应用程序性能。GraphQL 的灵活性使其越来越受欢迎，并且其将会成为未来 Web 应用程序的主要 API 设计方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64b0b63748841e9894ccdca8