Relay是构建数据驱动 React 应用的js框架。

Relay:特性一、声明式:不再使用一个命令式API与数据存储通讯。而是简单的使用RraphQL声明组件数据需求,让Relay理解如何及什么时候获取你的数据。

    特性二、托管:Relay聚合查询成有效的网络请求,只获取个人需要的数据。

    特性三、转变:Relay允许你使用GraphQL mutations 在客户端和服务器端转变数据,提供自动数据一致,优化更新和错误处理。

Relay通过维护组件与数据的依赖--在依赖的数据就绪前 组件是不会被渲染的,Relay用缓存的所有GraphQL数据的唯一的store,管理数据订阅和试图更新。

Relay的声明式数据获取:relay通过抽象出一个container的概念,让每个模块提前声明自己需要的数据,Relay会先遍历所有container,组成query tree,这样就达到了只使用一个网络请求的目的,同时通过声明式数据获取还可以更好的对组件约束,只能获取它已声明的数据,relay也可以做些验证。

GraphQL 一种查询语句,用于在复杂的应用程序的数据模型中,描述数据要求。

    step1:建立GraphQL 型架构影射到代码库。

    step2:服务针对该类型架构的查询结果,运行一个查询 获取一个字段。graphQL功能首先确保查询语法和语义有效执行,否则报告错误。

import {
graphql,
GraphQLSchema,
GraphQLObjecType,
GraphQLString
} from 'graphql';
var schema = new GraphQLSchema({
query:new GraphQLobjectType({
name:'RootQueryType',
fields:{
hello:{
type:GraphQLString,
resolve:() => 'world'
}
}
})
}); var query = `{boyhowdy}`;
grqphql(schema,query).then(result => {
    ...
    console.log(result);
});

Relay只有一个store,通过action(relay为mutations)改变,但禁止直接控制,根据GraphQL的查询语句去自动处理,储存或修改服务端数据。。

mutitations在客户端和服务器端都修改数据,保持数据一致,只能变更在服务器端声明过得数据,并且服务器必须有一个graphQL服务。

参考网站:redux 与 relay对比:http://www.tuicool.com/articles/7feMZrb

relay把React组件包裹进relay容器,能够自动检索子组件的数据依赖(根据GraphQL 查询片段),确保在graphQL查询片段在组件被渲染之前获取到数据,查询数据作为props传递进UI组件

Mutations(变更):客户端改变数据是常见需求,希望交互更快,做到乐观更新(页面UI先改变,再以服务器返回结果为准更改页面UI,如果出错会回滚),之后等到服务器返回结果,进行UI改变。

relay中获取数据,定义mutation,mutation首先是一个操作,然后是个查询,因此可以通过mutations使用GraphQL查询,以类似方式获取数据

  

Relay GraphQL理解的更多相关文章

  1. [转] Initial Impressions on GraphQL & Relay

    https://kadira.io/blog/graphql/initial-impression-on-relay-and-graphql http://graphql.org/blog/subsc ...

  2. [转] Node.js 服务端实践之 GraphQL 初探

    https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.n88wyan4e 0.问题来了 DT 时代,各种业 ...

  3. 【转】2016/2017 Web 开发者路线图

    链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...

  4. ReactEurope Conf 参会感想

    React 带来的革命性创新是前端世界过去几年最激动人心的变化.自从接触 React 以来,我深信 React 会改变客户端开发者(包括前端.iOS 和 Android)的开发体验.这次在巴黎举办的  ...

  5. fir.im Weekly - 如何打造 Github 「爆款」开源项目

    最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...

  6. CFF前端沙龙总结

    一. -OOCSS + Sass ——大漠 1. OOCSS 结构<=>皮肤 分离 容器<=>内容 分离 2. Sass 工具.处理器 SCSS(CSS风格)<=> ...

  7. 一、REACT概述

    1.前端/react概述 <从零react> 1.前端工 程概述 Web跨平台.跨浏览 器的应用开发场景 网页浏览器(Web Browser) 通过 CLI 指令去操作的 Headless ...

  8. React.createClass vs. ES6 Class Components

    1 1 1 https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ React.crea ...

  9. ApacheCN NodeJS 译文集 20211204 更新

    Node API 开发入门指南 零.前言 一.Node.js 简介 二.构建 API--第 1 部分 三.构建 API--第 2 部分 React TypeScript Node 全栈开发 零.序言 ...

随机推荐

  1. ES6之class 中 constructor 方法 和 super 的作用

    首先,ES6 的 class 属于一种“语法糖”,所以只是写法更加优雅,更加像面对对象的编程,其思想和 ES5 是一致的. function Point(x, y) { this.x = x; thi ...

  2. BootStrap:

    BootStrap: * 响应式的HTML,CSS,JS的框架. * 响应式设计: * 设计一套页面,适配不同的设备,在手机,PAD,PC端都能够正常浏览. * 响应式原理: * 使用CSS3的媒体查 ...

  3. 配合sublime使用flexible.js实现微信开发页面自适应

    什么是flexible.js 是一个终端设备适配的解决方案.也就是说它可以让你在不同的终端设备中实现页面适配. 是一个用来适配移动端的javascript框架.根据宽度的不同设置不同的字体大小,样式间 ...

  4. 006服务监控看板Hystrix Dashboard

    1.POM配置 和普通Spring Boot工程相比,仅仅添加了Hystrix Dashboard和Spring Boot Starter Actuator依赖 <dependencies> ...

  5. 12_Redis缓存穿透

    [何为缓存穿透] 缓存穿透是查询一个一定不存在的数据,这样的请求都要到存储层MySql去查询,失去了缓存的意义,在流量大时,可能MySql就挂掉了,要是有人利用不存在的key频繁攻击我们的应用,这就是 ...

  6. 116.001 - 爱折腾之用 Kindle 读学术论文是什么体验?

    @(116 - Kindle 使用指南) 结论先行 - 强烈安利k2pdfopt,把双栏论文转成kindle友好的pdf 整理转载自知乎@ wei huang 双栏学术论文在6寸屏上看就是个坑 新买的 ...

  7. 【Web】JavaScript 语法入门

    一. 简介 动态性和交互性 1.由浏览器解释执行 2.常见的脚本语言:JavaScript和VBScript P.S. Node.js 是使用JavaScript编写的服务器端框架. 二. JavaS ...

  8. java反射机制的简单介绍

    参考博客: https://blog.csdn.net/mlc1218559742/article/details/52754310 先给出反射机制中常用的几个方法: Class.forName (& ...

  9. WebService性能测试

    什么是WebService?(本文也会在最下面通俗的介绍) 这里给一个站内大哥的讲解:http://www.cnblogs.com/Leo_wl/archive/2010/05/20/1740205. ...

  10. mybatis ${}使用注意事项

    ${key}有值, ${key,jdbcType=VARCHAR}没有值 总结:${}使用时不要指定jdbcType等属性,指定这些反而取不到值,这也是跟#{}的一个区别.以上只是开发中遇到的情况,具 ...