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. wget http://pypi.python.org/packages/source/s/setuptools/setuptools-2.0.tar.gz 下载时报错 ssl is required 解决办法

    方法一:使用浏览器下载.在浏览器中输入 http://pypi.python.org/packages/source/s/setuptools/setuptools-2.0.tar.gz 方法二:将h ...

  2. mysql load data infile auto increment id

    1. 问题描述 当使用load data infile 向表中插入数据 而主键id是 auto_increment 时 ,执行 load data 不会报错 但插入也不成功 2. 问题解决 2.1 方 ...

  3. 洛谷P1024 一元三次方程求解(数学)

    题意 题目链接 Sol 本来是一道好的公式题. 然后输出只要保留两位小数?? 直接上不就赢了嘛.. #include<bits/stdc++.h> #define LL long long ...

  4. 转 linux screen 命令详解

    一.背景 系统管理员经常需要SSH 或者telent 远程登录到Linux 服务器,经常运行一些需要很长时间才能完成的任务,比如系统备份.ftp 传输等等.通常情况下我们都是为每一个这样的任务开一个远 ...

  5. vs2010开发activex(MFC)控件/ie插件(一)

    原文:http://blog.csdn.net/yhhyhhyhhyhh/article/details/50782904  vs2010开发activex(MFC)控件:      第一步:生成ac ...

  6. css outline属性

    outline属性在一个html element的周围画出一条线来,位于边框的外围,起到突出元素的作用.轮廓线不占据任何布局空间,也不一定非要是矩形. p { outline:#00FF00 dott ...

  7. 针对通过 SSH 连接到 Azure Linux VM 时发生的失败、错误或被拒绝问题进行故障排除

    尝试连接到 Linux 虚拟机 (VM) 时,有多种原因可能会导致安全外壳 (SSH) 错误.SSH 连接失败或被拒绝. 本文帮助用户找出原因并更正问题. 可以使用 Azure 门户.Azure CL ...

  8. Azkaban调度器

    Azkaban介绍 Azkaban 是由 Linkedin 公司推出的一个批量工作流任务调度器,用于在一个工作流内以一个特定的顺序运行一组工作和流程.Azkaban 使用 job 配置文件建立任务之间 ...

  9. 安装Access Database Engine后,提示未注册Microsoft.ACE.OLEDB.12.0

    未注册Microsoft.ACE.OLEDB.12.0 ,下载安装 Microsoft Access Database Engine:https://www.microsoft.com/en-us/d ...

  10. 关于NativeEvent的处理

    nativeEvent(const QByteArray &eventType, void *message, long *result){ chASSERT(message != NULL) ...