Relay GraphQL理解
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理解的更多相关文章
- [转] Initial Impressions on GraphQL & Relay
https://kadira.io/blog/graphql/initial-impression-on-relay-and-graphql http://graphql.org/blog/subsc ...
- [转] Node.js 服务端实践之 GraphQL 初探
https://medium.com/the-graphqlhub/your-first-graphql-server-3c766ab4f0a2#.n88wyan4e 0.问题来了 DT 时代,各种业 ...
- 【转】2016/2017 Web 开发者路线图
链接:知乎 [点击查看大图] 原图来自LearnCodeAcademy最火的视频,learncode是YouTube上最火的Web开发教学频道,介绍包括HTML/CSS/JavaScript/Subl ...
- ReactEurope Conf 参会感想
React 带来的革命性创新是前端世界过去几年最激动人心的变化.自从接触 React 以来,我深信 React 会改变客户端开发者(包括前端.iOS 和 Android)的开发体验.这次在巴黎举办的 ...
- fir.im Weekly - 如何打造 Github 「爆款」开源项目
最近 Android 转用 Swift 的传闻甚嚣尘上,Swift 的 Github 主页上已经有了一次 merge>>「Port to Android」,让我们对 Swift 的想象又多 ...
- CFF前端沙龙总结
一. -OOCSS + Sass ——大漠 1. OOCSS 结构<=>皮肤 分离 容器<=>内容 分离 2. Sass 工具.处理器 SCSS(CSS风格)<=> ...
- 一、REACT概述
1.前端/react概述 <从零react> 1.前端工 程概述 Web跨平台.跨浏览 器的应用开发场景 网页浏览器(Web Browser) 通过 CLI 指令去操作的 Headless ...
- React.createClass vs. ES6 Class Components
1 1 1 https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ React.crea ...
- ApacheCN NodeJS 译文集 20211204 更新
Node API 开发入门指南 零.前言 一.Node.js 简介 二.构建 API--第 1 部分 三.构建 API--第 2 部分 React TypeScript Node 全栈开发 零.序言 ...
随机推荐
- poj 1700 Crossing River 过河问题。贪心
Crossing River Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 9887 Accepted: 3737 De ...
- ComfortColor.xcs
ComfortColor.xcs [comfort color] text=dce2e2text(bold)=dce2e2 magenta=dd3682magenta(bold)=dd3682 whi ...
- 007API网关服务Zuul
001.POM配置 和普通Spring Boot工程相比,增加了Eureka Client.Zuul依赖和Spring Cloud依赖管理 <dependencies> <depen ...
- 【阿里云产品公测】在ACE上部署WP测试体验
ACE服务其实已经有很多类似的服务提供商了,无论收费的还是免费的, 但是到现在为止还没有体验过,正好借着这次机会,来体验一下阿里云的ACE服务. ' !2NSv /IQ$[WR cx B ...
- C语言string.h中常用字符函数介绍
原文:http://www.cnblogs.com/xuwenmin888/archive/2013/05/03/3057883.html strcpy 函数名: strcpy 功 能: 拷贝一个字符 ...
- 十五、css3 Filter--滤镜
如何实现下图的效果-—这里就用到了滤镜 给灰色弹框这个标签元素加“伪类”如下: #nearStoreContent .popChoose li:before { 1. z-index:; 2. pos ...
- c# 读取txt文件并分隔
public static List<PostPerson> GetNameByFile() { #region 读取txt文件 var file = File.Open(Environm ...
- writing a javascript module ready for ES6 import
javascript模块化是一个比较大也是比较容易混淆的topic.通常几乎所有的第三方Library都支持CMD,AMD,ES6,Global object方式来引用lib所暴露出来的服务. 那么如 ...
- 查看Oracle表中的指定记录在数据文件中的位置
查看Oracle表中的指定记录位置select rowid,user_id from sshr.xx_user where user_id=3010586 select rowid, db ...
- MongoDB创建集合、删除集合
创建集合 createCollection() 方法 在 MongoDB 中,创建集合采用 db.createCollection(name, options) 方法. 语法格式 createColl ...