GraphQL 簡介

Transcript

1. GraphQL 為什什麼 Web 這麼多 QQ
2. GraphQL
3. Why? Why not just use RESTful API?
4. RESTful API 使⽤用簡單的規則將資源定位： 抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作， 例例如下⾯面可以⽤用來來建立⼀一個新的群組資源 POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users
5. RESTful API 使⽤用簡單的規則將資源定位： 抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作， 例例如下⾯面可以⽤用來來建立⼀一個新的群組資源 POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users 很夠了了！
6. RESTful API 如果我想抓取某個群組裡⾯面的使⽤用者清單以外， 還想要抓取裡⾯面的使⽤用者的資料呢？
7. 從 Client 下⼿手 GET /groups/1/users { "users": [ { "id": 1, "name": "Bob" }, { "id": 2, "name": "Alice" }, { "id": 3, "name": "Katherine" } ] }
8. 從 Client 下⼿手 GET /users/1 { "id": 1, "name": "Bob", "email": "bob@example.com", "url": "http://bob.example.com" } GET /users/2 { "id": 2, "name": "Alice", "email": "alice@example.com", "url": "http://alice.example.com" } GET /users/3 { ... }
9. 從 Client 下⼿手 • 連線延遲 => 花比較多時間 • 網路路品質不好 => 花比較多次數
10. 從 Server 下⼿手 GET /groups/1/users?users.detail=1 { "users": [ { "id": 1, "name": "Bob", "email": "bob@example.com", "url": "http://bob.example.com" }, { "id": 2, "name": "Alice", "email": "alice@example.com", "url": "http://alice.example.com" }, { ... } ] }
11. 從 Server 下⼿手 • 需要更更多欄欄位 => 修改 Server API 的程式碼 • 返回所有資料 => 單⼀一請求吞吐量量上升
12. RESTful 的缺點 • 沒辦法處理理批次請求（沒有規範） • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費 • 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源
13. RESTful 的缺點 • 沒辦法處理理批次請求（沒有規範） • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費 • 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源 浪費資源！
14. GraphQL 的特點 • 型別系統 • GraphQL 是強型別語⾔言，對於所有返回的物件， 其型別都必須被預先定義 • 內省機制（Introspection） • 能夠藉由查詢內部結構讓 Client 掌握 API 細節 • 提供巢狀狀資源以及批次請求的⽀支援 • 由 Client 指定返回欄欄位，降低連線負載度
15. 預覽 GraphQL POST /graphql query { group(id: 1) { users { id email } } }
16. 預覽 GraphQL { "data": { "group": { "users": [ { "id": 1, "email": "bob@example.com" }, { "id": 2, "email": "alice@example.com" }, { "id": 3, "email": "kathy@example.com" } ] } } }
17. 預覽 GraphQL POST /graphql query { group(id: 1) { users { id email } } }
18. POST /graphql query { group(id: 1) { users { id email } } } <============= 唯⼀一 Endpoint <================= GraphQL 查詢操作 <============== 查詢參參數 <=============== 欄欄位選取 預覽 GraphQL
19. GraphQL
20. Type system type User { id: ID! name: String! email: String url: String } type Group { id: ID! name: String! users: [User!]! }
21. Type system • 型別定義： type User { ... } • 定義欄欄位（Field） id: ID! name: String! email: String users: [User!]!
22. 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
23. Type system • 提供⾃自訂 Scalar type scalar Date • 宣告陣列列 [Type] • 宣告非空 Type! • 組合技！ [Type] [Type]! [Type!] [Type!]!
24. 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! }
25. Type system • Enum enum PostType { NORMAL
 SHARE } • Union type union SearchResult = Post | User query { search(text: "an") { id ... on Post { title } ... on User { name } } }
26. Query & Mutation • GraphQL 提供查詢（Query）以及轉移（Mutation）的 操作來來對資源進⾏行行存取 • root object 提供 query 及 mutation 兩兩個 field query { group(id: 1) { users { id email } } }
27. Mutation mutation { createUser(name: "Jobs") { id } } { "data": { "createUser": { "id": 4 } } }
28. Query & Mutation • Query 是非同步平⾏行行查詢；但 Mutation 會循序執⾏行行 • Query 沒有副作⽤用
29. Variables query ($type: PostType) { posts(type: $type) { id title } } { "type": "SHARE" }
30. Variables query ($type: PostType) { posts(type: $type) { id title } } { "type": "SHARE" } <== 宣告 $type 型別 <== 純 JSON 沒有型別，需轉型
31. Connection • Connection 是⼀一種特殊形態的 Query • 表⽰示圖上節點之間的邊
32. GraphQL
33. Pagination query { posts { id title } }
34. Pagination query { posts { id title } } { "data": { "posts": [ { "id": 1, "title": "Post 1" }, { "id": 2, "title": "Post 2" }, ... ] } }
35. Pagination query { posts(first: 2) { id title } }
36. Pagination query { posts(first: 2 offset: 3) { id title } }
37. Pagination query { posts(first: 2 after: $postId) { id title } }
38. Connection query { postsConnection(first: 2 after: $cursor) { edges { node { id title } cursor } totalCount pageInfo { endCursor hasNextPage } } }
39. 內省機制 Introspection
40. 內省機制 query { __schema { types { name } } }
41. 內省機制 { "data": { "__schema": { "types": [ { "name": "Query" }, { "name": "User" }, { "name": "ID" }, { "name": "String" }, ... ] } } }
42. 內省機制 • Query, User, Group, Mutation, ... • 我們⾃自訂的型別（包含 Query, Mutation） • String, Boolean, String, ... • Scalar types • __Schema, __Type, __Field, ... • 底線開頭的 Meta Fields，屬內省系統的⼀一部分
43. 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
44. GraphQL 3Q~