前置知識：React/Redux/Restful API
關(guān)于為什么要使用GraphQL 前面已有幾篇文章鋪墊，這里主要總結(jié)用法。開始使用GraphQL之前，要安裝一些依賴：
apollo-boost 包含啟動阿波羅客戶端的所有依賴
react-apollo 視圖層面的集合
graphql-tag 解析查詢語句必須
graphql 也是解析查詢語句
強(qiáng)烈安利https://codesandbox.io運(yùn)行實(shí)踐，可以減少電腦文件夾的凌亂感……下圖是安裝依賴的步驟：
安裝依賴
初始化完成后，頁面顯示正常。這時(shí)需要從依賴?yán)镆霂讟訓(xùn)|西：
引入ApolloClient并新建一個(gè)實(shí)例client；
引入ApolloProvider并且包裹頁面組件，ApolloProvider有一個(gè)屬性client用于連接GraphQL和React，它的用法類似Redux里的Provider。
引入gql用于解析GraphQL；
引入Query組件用于包裹頁面組件。
Query組件是這個(gè)項(xiàng)目里面最重要的組件之二，另外一個(gè)是Mutation?？梢哉J(rèn)為他們分別對應(yīng)著Restful API 里面的GET和POST/PUT/DELETE等功能。
以下圖查詢狗類品種為例，在第12行g(shù)ql語句部分聲明查詢狗的id和breed種類。然后第28行將該查詢語句作為Query組件的query屬性值，在第33行渲染部分，我們遍歷返回值，在頁面顯示所有的狗的品種名稱，得到右圖的結(jié)果。
查詢狗的品種
如果我們只想查詢某一品種的狗的圖片，可以通過variables屬性傳遞參數(shù)，在第16行查詢語句里新增查詢的字段名，第23行傳遞我們想查詢的實(shí)參mix，第28行添加形參breed品種，右圖也成功地查詢到了該品種的圖片。
傳參查看具體品種的圖片
Query部分的基本用法就是這樣，如果還有顯示加載狀態(tài)、錯(cuò)誤處理、輪詢和重新獲取的需求，可以繼續(xù)參閱文檔。https://www.apollographql.com/docs/react/essentials/queries.html
相比Query部分，Mutation部分復(fù)雜一點(diǎn)，但是道理是相通的。這里以（萬年不變的）新增和編輯TODO為例，項(xiàng)目包括1個(gè)Query和2個(gè)Mutation，Query部分總是查詢當(dāng)前的待辦事項(xiàng)，Mutation部分則是處理新增和編輯的操作。
新增編輯待辦事項(xiàng)例子
可以看到，兩處的gql語句的寫法，我們要拿到的值只有事項(xiàng)的id 和 事項(xiàng)內(nèi)容的type 兩個(gè)。
兩條mutation語句
寫一個(gè)輸入框，點(diǎn)擊新增按鈕后，輸入框的內(nèi)容便新增到了頁面，Mutation的屬性只有mutation和children是必須的。
其他的屬性也可圈可點(diǎn)，update有很多實(shí)用的方法，比如可以通過cache.readQuery 和 cache.writeQuery查詢和修改Query，就好像是和服務(wù)端通信一樣，update第二個(gè)參數(shù)是一個(gè)包含Mutation結(jié)果的對象。
optimisticResponse 可以讓頁面響應(yīng)更快，你的調(diào)用會被執(zhí)行兩次，一次是頁面的結(jié)果，另一次是真實(shí)的結(jié)果。比如一個(gè)評論功能，當(dāng)你點(diǎn)擊提交按鈕的時(shí)候，頁面立即就更新了而無需等待服務(wù)端響應(yīng)。
新增部分update第一個(gè)參數(shù)是cache
更新部分mutation嵌套在query里
