Relay GraphQL理解

Relay是構建數據驅動 React 應用的js框架。

Relay：特性1、聲明式：再也不使用一個命令式API與數據存儲通信。而是簡單的使用RraphQL聲明組件數據需求，讓Relay理解如何及何時獲取你的數據。

　　　　特性2、託管：Relay聚合查詢成有效的網絡請求，只獲取我的須要的數據。

　　　　特性3、轉變：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查詢，以相似方式獲取數據