GraphQL 旋风教程

Xiaoru "Leo" Li 原作,授权 New Frontend 翻译。

总想在新项目中用下 GraphQL,但是一直没时间学习它是如何工作的?😃

不如就从这个周末开始学习上手吧!🙌

👇下面这份 GraphQL 旋风教程正是为你准备的!🥳

GraphQL 是一种查询语言,可以发起灵活多变的 API 调用。

在单次请求中通过嵌套字段描述所需数据,然后就能收到结构精准的数据 payload。

再也不用发起许多请求然后拼接数据了,也不会获取到不需要的数据!

GraphQL 请求和响应

GraphQL 不是一个库,而是一份语言标准。

我们发送 POST 或 GET 请求,服务器会检查这些请求是否符合预先定义的图式(schema),然后运行相应的操作函数,准备好返回给客户端的数据。

GraphQL 请求流程

GraphQL 的图式定义合法请求的结构,返回相应的数据类型,可以把它视为客户端和服务端的通讯协议。

图式是强类型的,可以嵌套,支持 union、枚举、接口等类型。

最常用的操作类型是查询(Query)。

图式、类型、请求

有些查询可以传入参数,以支持过滤结果等功能。图式定义了所有合法的参数。

后端需要有相应的操作函数完成这些条件查询。

注意:GraphQL 没有内置比较运算符、比较函数。

传入参数

有时候我们会在一个请求中多次选取同一字段,但是每次传入的参数不同(如下图所示)。这会导致命名冲突,所以我们需要给这些字段分配别名。

任何字段都可以添加别名。

分配别名避免字段命名冲突

我们可以将「子字段」封装为片段(Fragment),然后在选取时通过展开(spread)操作符复用片段。当你需要重复选取相同的一组字段时,这个功能非常有用。你可以把它想象成由 GraphQL 字段名组成的 JS 对象。

片段会随主查询一起发送。

片段的定义和使用

GraphQL 变量可以用来模块化、分享、复用预先写好的查询代码。我们在查询开头声明变量,声明变量时可以指定变量的默认值。

不知道你之前是否注意到第二张配图中请求 payload 里面有 variables 字段?下面是 variables 字段的详情:

变量的定义和默认值

GraphQL 图式中的接口让我们能够以面向对象编程的方式灵活地创建和使用复杂的数据类型。

类型可以实现(多个)接口。

当返回类型是接口时,我们可以使用 on 关键字按条件访问特定实现的字段。

接口的实现和使用

和请求不同,变更(Mutation)操作可以用来修改服务端数据,例如,创建账号、生成鉴权 token、添加数据条目。

和请求类似,我们可以在变更操作中传入参数。变更也会返回值,因此别忘了选取所需字段!

通常把变更的参数封装为 input 类型

除了通过 HTTP 发送请求外,GraphQL 也提供订阅(Subscription)操作以创建 WebSocket 连接,这样服务器可以持续向客户端推送更新。

在股市、即时通讯之类的实时应用场景下,这一功能尤为有用。

WebSocket 连接

希望你喜欢这份 GraphQL 旋风教程!周末愉快!

你可能感兴趣

评论

正在加载评论