Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL 簡介

GraphQL 簡介

David Kuo (Davy)

October 24, 2017
Tweet

More Decks by David Kuo (Davy)

Other Decks in Programming

Transcript

  1. 從 Client 下⼿手 GET /groups/1/users { "users": [ { "id":

    1, "name": "Bob" }, { "id": 2, "name": "Alice" }, { "id": 3, "name": "Katherine" } ] }
  2. 從 Client 下⼿手 GET /users/1 { "id": 1, "name": "Bob",

    "email": "[email protected]", "url": "http://bob.example.com" } GET /users/2 { "id": 2, "name": "Alice", "email": "[email protected]", "url": "http://alice.example.com" } GET /users/3 { ... }
  3. 從 Server 下⼿手 GET /groups/1/users?users.detail=1 { "users": [ { "id":

    1, "name": "Bob", "email": "[email protected]", "url": "http://bob.example.com" }, { "id": 2, "name": "Alice", "email": "[email protected]", "url": "http://alice.example.com" }, { ... } ] }
  4. 從 Server 下⼿手 • 需要更更多欄欄位 => 修改 Server API 的程式碼

    • 返回所有資料 => 單⼀一請求吞吐量量上升
  5. RESTful 的缺點 • 沒辦法處理理批次請求(沒有規範) • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費

    • 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源
  6. RESTful 的缺點 • 沒辦法處理理批次請求(沒有規範) • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費

    • 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源 浪費資源!
  7. GraphQL 的特點 • 型別系統 • GraphQL 是強型別語⾔言,對於所有返回的物件, 其型別都必須被預先定義 • 內省機制(Introspection)

    • 能夠藉由查詢內部結構讓 Client 掌握 API 細節 • 提供巢狀狀資源以及批次請求的⽀支援 • 由 Client 指定返回欄欄位,降低連線負載度
  8. 預覽 GraphQL { "data": { "group": { "users": [ {

    "id": 1, "email": "[email protected]" }, { "id": 2, "email": "[email protected]" }, { "id": 3, "email": "[email protected]" } ] } } }
  9. POST /graphql query { group(id: 1) { users { id

    email } } } <============= 唯⼀一 Endpoint <================= GraphQL 查詢操作 <============== 查詢參參數 <=============== 欄欄位選取 預覽 GraphQL
  10. Type system type User { id: ID! name: String! email:

    String url: String } type Group { id: ID! name: String! users: [User!]! }
  11. Type system • 型別定義: type User { ... } •

    定義欄欄位(Field) id: ID! name: String! email: String users: [User!]!
  12. Scalar types • Int • Signed 32-bit integer • Float

    • Double-precision floating-point • String • UTF-8 character sequence • Boolean • Just "true" or "false" • ID • A unique identifier • Serialized in the same way as String
  13. Type system • 提供⾃自訂 Scalar type scalar Date • 宣告陣列列

    [Type] • 宣告非空 Type! • 組合技! [Type] [Type]! [Type!] [Type!]!
  14. Type system • Interface interface Account { id: ID! name:

    String! } type User implements Account { id: ID! name: String! email: String! } interface Bot implements Account { id: ID! name: String! author: User! }
  15. Type system • Enum enum PostType { NORMAL
 SHARE }

    • Union type union SearchResult = Post | User query { search(text: "an") { id ... on Post { title } ... on User { name } } }
  16. Mutation mutation { createUser(name: "Jobs") { id } } {

    "data": { "createUser": { "id": 4 } } }
  17. Variables query ($type: PostType) { posts(type: $type) { id title

    } } { "type": "SHARE" } <== 宣告 $type 型別 <== 純 JSON 沒有型別,需轉型
  18. Pagination query { posts { id title } } {

    "data": { "posts": [ { "id": 1, "title": "Post 1" }, { "id": 2, "title": "Post 2" }, ... ] } }
  19. Connection query { postsConnection(first: 2 after: $cursor) { edges {

    node { id title } cursor } totalCount pageInfo { endCursor hasNextPage } } }
  20. 內省機制 { "data": { "__schema": { "types": [ { "name":

    "Query" }, { "name": "User" }, { "name": "ID" }, { "name": "String" }, ... ] } } }
  21. 內省機制 • Query, User, Group, Mutation, ... • 我們⾃自訂的型別(包含 Query,

    Mutation) • String, Boolean, String, ... • Scalar types • __Schema, __Type, __Field, ... • 底線開頭的 Meta Fields,屬內省系統的⼀一部分
  22. References • GraphQL • http://graphql.org • GraphQL API v4 •

    https://developer.github.com/v4/ • Explaining GraphQL Connections • https://dev-blog.apollodata.com/explaining-graphql-connections-c48b7c3d6976 • GraphQL and Relay 浅析 • https://segmentfault.com/a/1190000004586237 • GraphQL 入⾨門 Part I - 從 REST 到 GraphQL • https://ithelp.ithome.com.tw/articles/10188294