隨著前端的快速產(chǎn)品迭代，過去我們常用的REST API就顯得太不靈活了，無法滿足前端快速變化的需求。 GraphQL的誕生就是為了滿足更高靈活性和效率的需求，解決了REST API的許多缺點和低效問題！它支持聲明性數(shù)據(jù)提取，可以與React完美地結(jié)合構(gòu)建用戶界面。

Apollo Client是使用GraphQL構(gòu)建客戶端應(yīng)用程序的最佳方式。可以快速構(gòu)建使用GraphQL獲取數(shù)據(jù)的UI，并且可以與任何JavaScript的前端框架一起使用。

跳過服務(wù)端和依賴項，我們需要先創(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ù)類型)，!號為必傳參數(shù)。

是不是很像數(shù)據(jù)庫的關(guān)系表，這下前端也可以寫SQL語句啦。只要熟悉數(shù)據(jù)表的結(jié)構(gòu)就可以要什么拿什么，為所欲為。

調(diào)用方式:

1.使用graphql()函數(shù)包裝組件。

如果傳入的graphql文檔是query，那么prop將被命名data。如果傳遞了一個mutation，prop將被命名mutate。

graphql()函數(shù)的第一個參數(shù)是gql``模板，第二個參數(shù)是可選配置（比如更改name，傳遞variables）。

使用compose函數(shù)，可以使用具有相同組件的多個query或mutation。為了避免默認(rèn)名稱發(fā)生??沖突，可以使用config.name來為每個query或mutation提供一個新名稱。

2.通過client主動調(diào)用

有些時候需要我們手動調(diào)用query來查詢數(shù)據(jù)，這時候可以通過Apollo的client來發(fā)起請求。

可以用withApollo包裝組件，從props中獲取client。

3.使用Query/Mutation組件包裝視圖，這是我們最常用的方法。

Query組件：

簡單到只需傳遞一個gql查詢字符串，并提供一個this.props.children函數(shù)來呈現(xiàn)的內(nèi)容。

它有許多props，這里列舉一些特殊的。

pollInterva：是以指定時間反復(fù)從服務(wù)端查詢?

fetchPolicy：指定組件與Apollo緩存交互方式。默認(rèn)為“cache-first”。當(dāng)我們想要避免緩存，可以傳遞network-only讓他每次都是通過重新請求服務(wù)端返回結(jié)果。

Mutation組件:

使用方法和Query組件基本一樣，區(qū)別較大的地方是props.children函數(shù)。

函數(shù)的第一個參數(shù)是mutate函數(shù)， 需要主動調(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）

第二個參數(shù)是mutate后的結(jié)果以及狀態(tài)。

apollo的使用介紹到此為止啦??，寫的不是很好，有疑問歡迎留言，不對的地方也請不吝賜教??。