GraphQL 是一种用于 API 开发的查询语言和运行时。它由 Facebook 于 2012 年开发,目的是为了替代 RESTful API。虽然目前使用 RESTful API 的频率极高,但 GraphQL 作为一种更加高效、灵活且易于理解的 API 工具,正在成为越来越多的前端工程师的首选。
什么是 GraphQL?
GraphQL 是一种基于标记语言的查询语言,它通过定义一套 API 与前端工程师建立连接。与 RESTful API 不同,GraphQL 思路不是按照资源去设计,而是按照客户端使用的视角去设计。也就是说,前端工程师可以根据自己的需要自由地组合、选择 API 的输出内容。
GraphQL 分为三个部分:查询语言、服务端和客户端。前端工程师通过查询语言发起请求,服务端将结果返回,客户端响应并呈现结果。
如何使用 GraphQL?
使用 GraphQL 可以分三步走:
1. 创建 Schema
Schema 是用来描述查询的类型结构的。在 GraphQL 中,Schema 包含了三种类型:Query、Mutation 和 Subscription。其中 Query 是可选的,而 Mutation 和 Subscription 是必选的。
---- ----- - ---------- ------ ------ ------------------ ------- --------- ----- -------- - ---- ------ - --- ---- ---------- ------ --------- ------ ------ ------ - ---- ---- - --- ---- ------ ------ --------- ---- -
如上,我们定义了三个类型:Query 类型、Author 类型和 Book 类型。其中 Query 类型作为根节点,Author 和 Book 类型则可以用来拓展查询。
2. 编写 Resolver
Resolver 的任务是负责解析 Schema 中定义的类型,返回实际的数据。
----- ------- - - - --- -- ---------- ------- --------- ------ ------ - - --- -- ------ -------- ----- --------- -- -- -- -- -- ----- --------- - - ------ - ------- --- - -- -- -- --------------------- -- --------- --- ---- ----------- --- - ------- -------- -- -- - --- ------- - ------------- -- -------- - ------- - ----------------------- -- --------------------------------- -- -------------------------------- -- - -- ---------- - ------- - ---------------- ---------- - ------ -------- -- -- ------- - ------ -------- -- - ------ ------------------- -- ------------- --- ----------- -- -- -- ------ ------- ----------
如上,我们定义了两个 Query 类型的 Resolver 和一个 Author 类型的 Resolver。其中,firstBook 和 allAuthors 用来查询数据,books 用来获取一个作者的所有书。
3. 发起请求
使用 GraphQL,前端工程师会向服务端发起请求,请求会以一个 JSON 对象的形式被发送至服务端。如下是一个发起 GraphQL 请求的 JavaScript 示例代码:
------ - ------------- ---- ------------- - ---- ----------------- ----- ------ - --- -------------- ---- ------------------------------ ------ --- ---------------- --- ------ -------- ------ ---- ----- --------- - ---------- -- - -- --------- -------- ----- - -- ----- - - - -- -- -------------- -- ---------------------
如上所示,我们使用 ApolloClient
、gql
和 InMemoryCache
创建出一个 GraphQL 客户端,并调用其 query
方法发起请求,query
方法的参数为一个 graphql string
。
GraphQL vs. RESTful API
在使用 RESTful API 进行开发时,一般需要考虑如何组织资源的映射关系,并通过 URL 暴露给客户端。但随着系统和应用功能的增加,RESTful API 的 URL 结构会变复杂,很难满足系统和应用各种查询的要求。
相对于 RESTful API,GraphQL 有以下优势:
1. 接口精简
RESTful API 通常为每个资源都提供一个固定 URL,URL 中包含资源的集合、子集合等信息。如果需要获取某个相关联的资源,则必须获取完整的父资源url,然后再进行关联。
GraphQL 中则不同,因为Schema中已经定义了数据模型,客户端只需要通过数据查询请求所需嵌套的信息,服务端会根据Schema返回所需的数据,减少了无用的数据通信。
2. 灵活性
在 RESTful API 的 URL 结构中,一旦设计存在问题,后期改动将比较困难。GraphQL 通过 Schema 的方式来组织数据结构和数据查询,前端可以方便的根据自己的需要自由组合、查询、更新、删除数据。
3. 标准化
GraphQL 提供了强类型系统,所有数据类型均通过 Schema 的方式来定义,并且服务端的响应也遵循对象类型定义。因此合同开发人员能够更容易地与客户端工程师进行沟通。
GraphQL 的应用场景
由于 GraphQL 具有灵活、精简、标准化等优点,因此 在以下场景经常使用 GraphQL。
数据驱动的应用
对于数据输入高,并且复杂的应用程序,以及那些需要纵向导航大量组合数据的应用程序,GraphQL 的数据询问语言等属性尤为适用。此类应用程序包括:多层次的关系、网格数据等复杂场景。
前端应用
GraphQL 相较于 REST API 的优势使其在开发前端应用上优势明显。前端应用通常需要更高的速度和更少的延迟,而 REST API 所提供的数据结构和数据查询往往会增加浏览器访问数据的延迟,而GraphQL通常可以显著减少数据请求数量,减少数据/查询的大小,提高应用性能。
总结
GraphQL 是一种用于 API 开发的查询语言和运行时,它基于标记语言而非 URL 并且通过 Schema 定义数据结构。GraphQL 相对于 RESTful API 有着更为灵活、精简、标准化等多方面的优势,使得 GraphQL 的应用场景越来越多。
如果你是前端工程师,我相信你一定会因为 GraphQL 的优势而越来越认可它,并做出自己的选择。
来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/64a1531148841e9894d9992b