这节的主要内容有
——转化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拦截
网友评论