GraphQL 簡介 - Speaker Deck

Slide 1

Slide 1 text

GraphQL 為什什麼 Web 這麼多 QQ

Slide 2

Slide 2 text

GraphQL

Slide 3

Slide 3 text

Why? Why not just use RESTful API?

Slide 4

Slide 4 text

RESTful API 使⽤用簡單的規則將資源定位：抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作，例例如下⾯面可以⽤用來來建立⼀一個新的群組資源 POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users

Slide 5

Slide 5 text

RESTful API 使⽤用簡單的規則將資源定位：抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作，例例如下⾯面可以⽤用來來建立⼀一個新的群組資源 POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users 很夠了了！

Slide 6

Slide 6 text

RESTful API 如果我想抓取某個群組裡⾯面的使⽤用者清單以外，還想要抓取裡⾯面的使⽤用者的資料呢？

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

從 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 { ... }

Slide 9

Slide 9 text

從 Client 下⼿手 • 連線延遲 => 花比較多時間 • 網路路品質不好 => 花比較多次數

Slide 10

Slide 10 text

從 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" }, { ... } ] }

Slide 11

Slide 11 text

從 Server 下⼿手 • 需要更更多欄欄位 => 修改 Server API 的程式碼 • 返回所有資料 => 單⼀一請求吞吐量量上升

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

GraphQL 的特點 • 型別系統 • GraphQL 是強型別語⾔言，對於所有返回的物件，其型別都必須被預先定義 • 內省機制（Introspection） • 能夠藉由查詢內部結構讓 Client 掌握 API 細節 • 提供巢狀狀資源以及批次請求的⽀支援 • 由 Client 指定返回欄欄位，降低連線負載度

Slide 15

Slide 15 text

預覽 GraphQL POST /graphql query { group(id: 1) { users { id email } } }

Slide 16

Slide 16 text

預覽 GraphQL { "data": { "group": { "users": [ { "id": 1, "email": "[email protected]" }, { "id": 2, "email": "[email protected]" }, { "id": 3, "email": "[email protected]" } ] } } }

Slide 17

Slide 17 text

預覽 GraphQL POST /graphql query { group(id: 1) { users { id email } } }

Slide 18

Slide 18 text

POST /graphql query { group(id: 1) { users { id email } } } <============= 唯⼀一 Endpoint <================= GraphQL 查詢操作 <============== 查詢參參數 <=============== 欄欄位選取預覽 GraphQL

Slide 19

Slide 19 text

GraphQL

Slide 20

Slide 20 text

Type system type User { id: ID! name: String! email: String url: String } type Group { id: ID! name: String! users: [User!]! }

Slide 21

Slide 21 text

Type system • 型別定義： type User { ... } • 定義欄欄位（Field） id: ID! name: String! email: String users: [User!]!

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

Type system • 提供⾃自訂 Scalar type scalar Date • 宣告陣列列 [Type] • 宣告非空 Type! • 組合技！ [Type] [Type]! [Type!] [Type!]!

Slide 24

Slide 24 text

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! }

Slide 25

Slide 25 text

Type system • Enum enum PostType { NORMAL  SHARE } • Union type union SearchResult = Post | User query { search(text: "an") { id ... on Post { title } ... on User { name } } }

Slide 26

Slide 26 text

Query & Mutation • GraphQL 提供查詢（Query）以及轉移（Mutation）的操作來來對資源進⾏行行存取 • root object 提供 query 及 mutation 兩兩個 field query { group(id: 1) { users { id email } } }

Slide 27

Slide 27 text

Mutation mutation { createUser(name: "Jobs") { id } } { "data": { "createUser": { "id": 4 } } }

Slide 28

Slide 28 text

Query & Mutation • Query 是非同步平⾏行行查詢；但 Mutation 會循序執⾏行行 • Query 沒有副作⽤用

Slide 29

Slide 29 text

Variables query ($type: PostType) { posts(type: $type) { id title } } { "type": "SHARE" }

Slide 30

Slide 30 text

Variables query ($type: PostType) { posts(type: $type) { id title } } { "type": "SHARE" } <== 宣告 $type 型別 <== 純 JSON 沒有型別，需轉型

Slide 31

Slide 31 text

Connection • Connection 是⼀一種特殊形態的 Query • 表⽰示圖上節點之間的邊

Slide 32

Slide 32 text

GraphQL

Slide 33

Slide 33 text

Pagination query { posts { id title } }

Slide 34

Slide 34 text

Pagination query { posts { id title } } { "data": { "posts": [ { "id": 1, "title": "Post 1" }, { "id": 2, "title": "Post 2" }, ... ] } }

Slide 35

Slide 35 text

Pagination query { posts(first: 2) { id title } }

Slide 36

Slide 36 text

Pagination query { posts(first: 2 offset: 3) { id title } }

Slide 37

Slide 37 text

Pagination query { posts(first: 2 after: $postId) { id title } }

Slide 38

Slide 38 text

Connection query { postsConnection(first: 2 after: $cursor) { edges { node { id title } cursor } totalCount pageInfo { endCursor hasNextPage } } }

Slide 39

Slide 39 text

內省機制 Introspection

Slide 40

Slide 40 text

內省機制 query { __schema { types { name } } }

Slide 41

Slide 41 text

內省機制 { "data": { "__schema": { "types": [ { "name": "Query" }, { "name": "User" }, { "name": "ID" }, { "name": "String" }, ... ] } } }

Slide 42

Slide 42 text

內省機制 • Query, User, Group, Mutation, ... • 我們⾃自訂的型別（包含 Query, Mutation） • String, Boolean, String, ... • Scalar types • __Schema, __Type, __Field, ... • 底線開頭的 Meta Fields，屬內省系統的⼀一部分

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

GraphQL 3Q~