前置知識:React/Redux/Restful API
關于為什么要使用GraphQL 前面已有幾篇文章鋪墊,這里主要總結用法。開始使用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。可以認為他們分別對應著Restful API 里面的GET和POST/PUT/DELETE等功能。
以下圖查詢狗類品種為例,在第12行gql語句部分聲明查詢狗的id和breed種類。然后第28行將該查詢語句作為Query組件的query屬性值,在第33行渲染部分,我們遍歷返回值,在頁面顯示所有的狗的品種名稱,得到右圖的結果。
查詢狗的品種
如果我們只想查詢某一品種的狗的圖片,可以通過variables屬性傳遞參數,在第16行查詢語句里新增查詢的字段名,第23行傳遞我們想查詢的實參mix,第28行添加形參breed品種,右圖也成功地查詢到了該品種的圖片。
傳參查看具體品種的圖片
Query部分的基本用法就是這樣,如果還有顯示加載狀態、錯誤處理、輪詢和重新獲取的需求,可以繼續參閱文檔。https://www.apollographql.com/docs/react/essentials/queries.html
相比Query部分,Mutation部分復雜一點,但是道理是相通的。這里以(萬年不變的)新增和編輯TODO為例,項目包括1個Query和2個Mutation,Query部分總是查詢當前的待辦事項,Mutation部分則是處理新增和編輯的操作。
新增編輯待辦事項例子
可以看到,兩處的gql語句的寫法,我們要拿到的值只有事項的id 和 事項內容的type 兩個。
兩條mutation語句
寫一個輸入框,點擊新增按鈕后,輸入框的內容便新增到了頁面,Mutation的屬性只有mutation和children是必須的。
其他的屬性也可圈可點,update有很多實用的方法,比如可以通過cache.readQuery 和 cache.writeQuery查詢和修改Query,就好像是和服務端通信一樣,update第二個參數是一個包含Mutation結果的對象。
optimisticResponse 可以讓頁面響應更快,你的調用會被執行兩次,一次是頁面的結果,另一次是真實的結果。比如一個評論功能,當你點擊提交按鈕的時候,頁面立即就更新了而無需等待服務端響應。
新增部分update第一個參數是cache
更新部分mutation嵌套在query里