前置知識：React/Redux/Restful API
關(guān)于為什么要使用GraphQL 前面已有幾篇文章鋪墊蜡豹，這里主要總結(jié)用法炬灭。開始使用GraphQL之前，要安裝一些依賴：
apollo-boost 包含啟動阿波羅客戶端的所有依賴
react-apollo 視圖層面的集合
graphql-tag 解析查詢語句必須
graphql 也是解析查詢語句
強烈安利https://codesandbox.io運行實踐，可以減少電腦文件夾的凌亂感……下圖是安裝依賴的步驟：
安裝依賴
初始化完成后，頁面顯示正常嗡害。這時需要從依賴里引入幾樣東西：
引入ApolloClient并新建一個實例client；
引入ApolloProvider并且包裹頁面組件畦攘，ApolloProvider有一個屬性client用于連接GraphQL和React霸妹，它的用法類似Redux里的Provider。
引入gql用于解析GraphQL知押；
引入Query組件用于包裹頁面組件叹螟。
Query組件是這個項目里面最重要的組件之二，另外一個是Mutation台盯“照溃可以認為他們分別對應(yīng)著Restful API 里面的GET和POST/PUT/DELETE等功能。
以下圖查詢狗類品種為例静盅，在第12行g(shù)ql語句部分聲明查詢狗的id和breed種類良价。然后第28行將該查詢語句作為Query組件的query屬性值，在第33行渲染部分，我們遍歷返回值明垢，在頁面顯示所有的狗的品種名稱蚣常，得到右圖的結(jié)果。
查詢狗的品種
如果我們只想查詢某一品種的狗的圖片痊银，可以通過variables屬性傳遞參數(shù)抵蚊，在第16行查詢語句里新增查詢的字段名，第23行傳遞我們想查詢的實參mix溯革，第28行添加形參breed品種贞绳，右圖也成功地查詢到了該品種的圖片。
傳參查看具體品種的圖片
Query部分的基本用法就是這樣鬓照，如果還有顯示加載狀態(tài)熔酷、錯誤處理、輪詢和重新獲取的需求豺裆，可以繼續(xù)參閱文檔拒秘。https://www.apollographql.com/docs/react/essentials/queries.html
相比Query部分，Mutation部分復(fù)雜一點臭猜，但是道理是相通的躺酒。這里以（萬年不變的）新增和編輯TODO為例，項目包括1個Query和2個Mutation蔑歌，Query部分總是查詢當前的待辦事項羹应，Mutation部分則是處理新增和編輯的操作。
新增編輯待辦事項例子
可以看到次屠，兩處的gql語句的寫法园匹，我們要拿到的值只有事項的id 和 事項內(nèi)容的type 兩個。
兩條mutation語句
寫一個輸入框劫灶，點擊新增按鈕后裸违，輸入框的內(nèi)容便新增到了頁面，Mutation的屬性只有mutation和children是必須的本昏。
其他的屬性也可圈可點供汛，update有很多實用的方法，比如可以通過cache.readQuery 和 cache.writeQuery查詢和修改Query涌穆，就好像是和服務(wù)端通信一樣怔昨，update第二個參數(shù)是一個包含Mutation結(jié)果的對象。
optimisticResponse 可以讓頁面響應(yīng)更快宿稀，你的調(diào)用會被執(zhí)行兩次趁舀，一次是頁面的結(jié)果，另一次是真實的結(jié)果祝沸。比如一個評論功能矮烹，當你點擊提交按鈕的時候巡蘸，頁面立即就更新了而無需等待服務(wù)端響應(yīng)。
新增部分update第一個參數(shù)是cache
更新部分mutation嵌套在query里
