GraphQL 入門: 簡介

GraphQL 入門: 簡介
GraphQL 入門: Apollo Client - 簡介
GraphQL 入門: Apollo Client - 安裝和配置選項
GraphQL 入門: Apollo Client - 鏈接到數據
GraphQL 入門: Apollo Client - 網絡層
GraphQL 入門: Apollo Client - 開發調試工具
GraphQL 入門: Apollo Client - 持久化GraphQL查詢概要
GraphQL 入門: Apollo Client - 存儲API
GraphQL 入門: Apollo Client - 查詢(Batching)合併

GraphQL 是Facebook開發的一個應用層查詢語言. 後端定義基於圖的模式. 客戶端能夠按需查詢須要的數據.

上圖所示, 查詢流程分爲幾個步驟, 涉及多個組件, 包括客戶端應用程序(Web, 手機, 桌面等App), 一個GraphQL服務器用於解析查詢, 以及多個不一樣的數據來源.

客戶端數據要求發生變化時, 不須要修改後端. 所以, 你沒必要由於客戶端數據需求的變動而改變你的後端. 這解決了管理REST API中的最大的問題.

爲何解決了REST API的大問題, 看以下闡述:

註解:

只要你的業務模型沒有發生變化, 從數據模型不會發生變化, 那麼咱們就不須要修改後端API. 前端按照須要的字段進行查詢便可. 若是業務發生了變化, 咱們只須要修改GraphQL的模式定義, 而且實現對應的服務器端數據查詢邏輯便可. 傳統的REST查詢那些字段是固定的, 客戶端不能指定, GraphQL可讓客戶端指定要獲取那些字段的數據, 這給客戶端帶來了極大的靈活性, 讓先後端進一步分離. 查詢是能夠嵌套的, 返回的JSON對象結構和GraphQL查詢的結構是同樣的, 這樣更方便客戶端本身定義數據的結構.

GraphQL一樣可以讓客戶端程序高效地批量獲取數據. 例如, 看一看下面這個GraphQL請求:

{
  latestPost {
    _id,
    title,
    content,
    author {
      name
    },
    comments {
      content,
      author {
        name
      }
    }
  }
}

這個 GraphQL 請求獲取了一篇博客文章和對應評論與做者信息的數據. 下面是請求的返回結果:

{
  "data": {
    "latestPost": {
      "_id": "03390abb5570ce03ae524397d215713b",
      "title": "New Feature: Tracking Error Status with Kadira",
      "content": "Here is a common feedback we received from our users ...",
      "author": {
        "name": "Pahan Sarathchandra"
      },
      "comments": [
        {
          "content": "This is a very good blog post",
          "author": {
            "name": "Arunoda Susiripala"
          }
        },
        {
          "content": "Keep up the good work",
          "author": {
            "name": "Kasun Indi"
          }
        }
      ]
    }
  }
}

若是你使用的是REST的話，你須要調用多個REST API的請求才能獲取這些信息。

上手視頻

打開GraphQL沙箱, 而後跟着下面的視頻練習:
https://v.qq.com/x/page/r0387...

GraphQL是一個規範

所以, 它能夠用於任何平臺或語言. 它有一個參考的實現 JavaScript, 由Facebook維護. 還有許多社區維護的實現有許多種語言。

以前咱們用簡短的描述說明了GraphQL是什麼, 對其有了一個基本的映像, 如今咱們經過實際的操做來感覺GraphQL具體是一個什麼東西.

首先在瀏覽器中打開: https://sandbox.learngraphql.com ,而後在左側的查詢窗口中輸入下面的查詢語句:

咱們會看到下圖的GraphiQL查詢界面, 其界面窗口以下所示:

{
  latestPost {
    title,
    summary
  }
}

咱們將在右側的窗口看到查詢的結果以下:

{
  "data": {
    "latestPost": {
      "title": "New Feature: Tracking Error Status with Kadira",
      "summary": "Lot of users asked us to add a feature to set status for errors in the Kadira Error Manager. Now, we've that functionality."
    }
  }
}

如今咱們體驗了一下GraphQL是怎麼工做的, 下面咱們來擴展一下, 起始GraphQL的功能遠比你如今看到的要強大.

咱們能夠打開右上角的Docs鏈接, 能夠看到整個基於圖的模式有哪些東西是咱們可使用的. 下面我經過一個視頻來演示怎麼樣進一步深刻使用GraphQL.