GraphQL學習:Github GraphQL API v4初探

聰明叉發表於2018-12-20

檢視GithubAPI的時候,發現github API升級成了V4,並且叫GraphQL API v4。不禁大吃一驚,這是個什麼東東。

什麼是GraphQL

GraphQL(Graph Query Language):GraphQL 是一個用於 API 的查詢語言,是一個使用基於型別系統來執行查詢的服務端執行時(型別系統由你的資料定義)。

GraphQL是一門語言,專門用於API查詢。可以類比到SQL,這種型別的語言學名叫DSL(domain-specific language),譯作領域專用語言

為什麼Github選用GraphQL呢?因為GraphQL具有以下好處:

  • 更大的靈活性
  • 精確定義所需資料的能力(GraphQL擁有強型別)
  • 僅僅會返回你需要的資料(避免資料冗餘)
  • GraphQL允許您通過一次呼叫替換多個REST請求以獲取指定的資料

放一張來自圖說明下工作過程:

image

看起來與原本的REST API沒什麼兩樣。

是的,大致的工作流程就是如此,不過GraphQL作為一門語言,其中有許多的概念和語法。但是我不想純粹做官方文件的copyer,而是作為官方文件的一個導學,具體的概念和語法可以去

GraphQL中文網學習。

相信你也不愛一下子看到超多陌生概念,我們還行邊用邊學吧

初探

github提供了GraphQL Explorer來輔助GraphQL學習

一個小小案例

開啟GraphQL Explorer這裡我們先來執行下面的程式碼:

query { 
  viewer { 
    login
  }
}
複製程式碼

這段程式碼可以查詢你github的使用者名稱,注意,請先登入。

我執行的結果:

{
  "data": {
    "viewer": {
      "login": "smarxpan"
    }
  }
}
複製程式碼

這裡你可能會產生疑惑,為什麼介面可以這樣請求,到底發生了什麼魔法?

開啟抓包軟體,我們來抓個包看看。

上面的請求,實際上傳送的內容仍舊是個json:

{
	"query": "query { \n  viewer { \n    login\n  }\n}",
	"variables": {}
}
複製程式碼

這裡沒有什麼魔法,我們看到那段程式碼的內容作為query引數的值傳送給了服務端,服務端按照語法對其進行解析,然後返回給我們需要的值。

小小案例的具體解釋

query { 
  viewer { 
    login
  }
}
複製程式碼

這一小段的第一句:query

GraphQL中有兩種操作:query和mutation。query代表查詢,mutation是變更。查詢就是請求資料,而變更,對應REST API的POST/PATCH/DELETE。

這兩種操作使用的請求方式均為post,get請求在GraphQL不常用。

query的結構類似:

query {
  JSON objects to return
}
複製程式碼

其內部定義的是要返回資料的json結構。

學習和使用指引

最佳的示例當然是《Github GraphQL Guides》,其中有示例、可執行,裡面的每段程式碼都可點選到explorer裡執行。

語法學習還是推薦GraphQL中文網:《GraphQL 入門》

還有一篇部落格我覺得特別棒,是Leetcode工作的一位大神的《阻礙你使用 GraphQL 的十個問題》

而真正使用到工作中,當然少不了庫的使用

GraphQL服務端庫

GraphQL客戶端庫

目前主流的開發語言均有具體實現,取決於你使用的是哪一種語言,選擇自己的開發庫用起來。

結語

新技術無疑是讓人興奮的,GraphQL確實解決了不少痛點,如果專案沒什麼歷史包袱可以搞一搞。Github作為世界上最大的同性交友網站,其在API上使用該語言相信會帶動業界的進步,學就完了。

相關文章