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查询，以类似方式获取数据