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. php+mysql+jquery日历签到

    在网站开发过程中我们会经常用到签到功能来奖励用户积分,或者做一些其他活动.这次项目开发过程中做了日历签到,因为没有经验所有走了很多弯路,再次记录过程和步骤. 1.日历签到样式: 2.本次签到只记录本月 ...

  2. 移动端适配(3)——rem适配

    rem适配 <meta name="viewport"  content="width=device-width,user-scalable=no"/&g ...

  3. python全栈开发之路

    一.Python基础 python简介 python数据类型(数字\字符串\列表) python数据类型(元组\字典) python数据类型(集合) python占位符%s,%d,%r,%f prin ...

  4. mysql case when & concat & SUBSTRING_INDEX & not & having 使用的小case

    1. 代码 SELECT a.id, a.activity_name, ( CASE WHEN a.activity_end_time > now() THEN '参与中' ELSE ( CAS ...

  5. hiho 1015 KMP算法 && CF 625 B. War of the Corporations

    #1015 : KMP算法 时间限制:1000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助,在 ...

  6. idea 出现 java.noSuchMechodFound

    公司 用了多个项目来相互之间形成依赖.每次修改或者添加新功能,会升级版本.用的是maven,这几天 一直 出现一个问题就是:本地 升级版本完后 使用 git命令 mvn -deploy -e 打包后, ...

  7. java面试题----IO流种类及接口方法

    java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类? Java中的流分为两种,一种是字节流,另一种是字符流,分别由四个抽象类来表示(每种流包括输入和输出两种 ...

  8. GIT团队合作探讨之四--不同工作流优缺辨析

    由于git非常强大,它可以支持非常多的协作模式,而可能正因为选择太多反而有时候对于我们如何开始开展团队协作无从下手.本文试图阐述企业团队中应用最为广泛的git 工作流,为大家理清思路,最大限度发挥gi ...

  9. glyphicons-halflings-regular.woff2 not found 前台错误修正

    错误内容如下: 首先在 web.config 里面加上如下内容: <system.webServer> <staticContent> <remove fileExten ...

  10. Oracle案例04——ORA-39700: database must be opened with UPGRADE option

    Oracle11.2.0.3数据库通过rman备份到Oracle11.2.0.4上做还原,报需要升级的错误,具体处理步骤如下: 一.错误信息 SQL> alter database open r ...