第五章 GraphQL查询遵从Relay

2017-04-13  本文已影响0人  anrenluofeifei

这节的主要内容有

——转化GraphQL查询成Relay

——使react的层次适应语GraphQL的层次

——第一个Relay查询操作

——Relay连接模型的边界和节点

转化GraphQL查询成Relay

代替HTML字符串,使用javascript对象编程,但我们需要一个对象代表GraphQL查询的时候,我们可以添加更多的功能到查询的对象上,例如,可以进行内部检查、校验字段类型,幸运的是,我们不需要手动转化GraphQL操作

Relay有帮助的方法,叫做Relay.QL,他是我们使用查询标记的模版.

Relays使用Javascript的这种特性拦截GraphQL查询字符串返回一个对象,

Relay.QL `query { ... }` => {}

因为这种方法添加类型信息到查询对象上,需要了解GraphQL的结构,而不是缓存整个结构,在编译所有Javascript资源时Relay使用babel插件在服务端准备这些Relay.QL对象,

对于AllQutes查询,我们需要做的是;

-第一,在客户端使用Relay.QL ``模版语法 写查询

-然后,使用webpack处理所有的Javascript资源

-当有Relay.QL调用AllQutes查询,要求GraphQL结构,关于类型和字段

-最后,使用类型产生想要的查询对象并且返回

一个Relay应用将会有多个 Relay.QL调用,代替每次向GraphQL服务端请求字段类型我们想要的转化查询,我们能优化服务端的处理,通过缓存整个schema结构到一个大的JSON对象在服务端

缓存文件写好后,通过webpack命令,读取缓存一次并且重用从内存里面加速调用Relay.QL,通过babel插件 babel-relay-plugin

Root-level field for the quotes library

根级别的字段

这种数据需求所有者分离是有帮助的,允许组建独立增长/调试代码更容易/测试代码更容易,

fragment 被定义在GraphQL的类型上

Relay's connection model

Relay的连接模型

Relay的功能变得越来越强大,当处理大集合的时候,例如,几百个名言,通常的做法是监听页面做分页处理,例如,显示20条名言每页,Relay的连接模型将会帮助我们处理分页快速地和高效地,

我们首要做的是将allQuotes字段转化成Relay的连接字段,我们将会命名它为QuotesConnectionType,以便清晰的给客户端用,







intercept拦截

上一篇下一篇

猜你喜欢

热点阅读