隨著前端的快速產(chǎn)品迭代响疚，過去我們常用的REST API就顯得太不靈活了，無法滿足前端快速變化的需求瞪醋。 GraphQL的誕生就是為了滿足更高靈活性和效率的需求忿晕，解決了REST API的許多缺點(diǎn)和低效問題！它支持聲明性數(shù)據(jù)提取银受，可以與React完美地結(jié)合構(gòu)建用戶界面践盼。
Apollo Client是使用GraphQL構(gòu)建客戶端應(yīng)用程序的最佳方式”鑫。可以快速構(gòu)建使用GraphQL獲取數(shù)據(jù)的UI咕幻，并且可以與任何JavaScript的前端框架一起使用。
跳過服務(wù)端和依賴項(xiàng)顶霞，我們需要先創(chuàng)建客戶端肄程，讓我們可以從服務(wù)端獲取數(shù)據(jù)。然后將Apollo Client連接到React-Native选浑，用ApolloProvider包裝APP并將客戶端放在上下文中蓝厌，讓我們可以在組件樹中的任何位置訪問它。
App與服務(wù)端的通信無非就是取數(shù)據(jù)(query)和寫數(shù)據(jù)(mutate)古徒，進(jìn)入正題拓提，我們直接來聊聊react-native如何與Apollo結(jié)合來構(gòu)建UI。
先介紹graphql最具特色的graphql查詢字符串模板描函。
開頭聲明操作類型崎苗，接著自定義操作名稱(參數(shù)名:數(shù)據(jù)類型)狐粱，!號(hào)為必傳參數(shù)舀寓。
是不是很像數(shù)據(jù)庫(kù)的關(guān)系表，這下前端也可以寫SQL語句啦肌蜻。只要熟悉數(shù)據(jù)表的結(jié)構(gòu)就可以要什么拿什么互墓，為所欲為。
調(diào)用方式:
1.使用graphql()函數(shù)包裝組件蒋搜。
如果傳入的graphql文檔是query篡撵，那么prop將被命名data。如果傳遞了一個(gè)mutation豆挽，prop將被命名mutate育谬。
graphql()函數(shù)的第一個(gè)參數(shù)是gql``模板，第二個(gè)參數(shù)是可選配置（比如更改name帮哈，傳遞variables）膛檀。
使用compose函數(shù)，可以使用具有相同組件的多個(gè)query或mutation。為了避免默認(rèn)名稱發(fā)生??沖突咖刃，可以使用config.name來為每個(gè)query或mutation提供一個(gè)新名稱泳炉。
2.通過client主動(dòng)調(diào)用
有些時(shí)候需要我們手動(dòng)調(diào)用query來查詢數(shù)據(jù)，這時(shí)候可以通過Apollo的client來發(fā)起請(qǐng)求嚎杨。
可以用withApollo包裝組件花鹅，從props中獲取client。
3.使用Query/Mutation組件包裝視圖枫浙，這是我們最常用的方法刨肃。
Query組件：
簡(jiǎn)單到只需傳遞一個(gè)gql查詢字符串，并提供一個(gè)this.props.children函數(shù)來呈現(xiàn)的內(nèi)容箩帚。
它有許多props之景，這里列舉一些特殊的。
pollInterva：是以指定時(shí)間反復(fù)從服務(wù)端查詢?
fetchPolicy：指定組件與Apollo緩存交互方式膏潮。默認(rèn)為“cache-first”锻狗。當(dāng)我們想要避免緩存，可以傳遞network-only讓他每次都是通過重新請(qǐng)求服務(wù)端返回結(jié)果焕参。
Mutation組件:
使用方法和Query組件基本一樣轻纪，區(qū)別較大的地方是props.children函數(shù)。
函數(shù)的第一個(gè)參數(shù)是mutate函數(shù)叠纷， 需要主動(dòng)調(diào)用它來觸發(fā)mutation({options})刻帚，接收variables，optimisticResponse涩嚣，refetchQueries崇众，和update等參數(shù); 也可以作為props傳遞給Mutation組件。
variables是觸發(fā)mutation需要傳遞的參數(shù)航厚。
optimisticResponse是用來做樂觀更新的自定義data顷歌。??
refetchQueries用來觸發(fā)指定的query，常用來更新其它關(guān)聯(lián)的UI幔睬。?
update是在mutation結(jié)束后所做的操作眯漩，常用來更新指定的客戶端cache。
具體用法詳見：React Apollo mutation tips（2）
第二個(gè)參數(shù)是mutate后的結(jié)果以及狀態(tài)麻顶。
apollo的使用介紹到此為止啦??赦抖，寫的不是很好，有疑問歡迎留言辅肾，不對(duì)的地方也請(qǐng)不吝賜教??队萤。
