Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQL 簡介
Search
David Kuo (Davy)
October 24, 2017
Programming
0
110
GraphQL 簡介
David Kuo (Davy)
October 24, 2017
Tweet
Share
More Decks by David Kuo (Davy)
See All by David Kuo (Davy)
Operator SDK 帶你玩轉 Kubernetes
david50407
0
390
2016 計中短期資訊推廣課程 —— 多人線上繪圖板
david50407
0
140
Open Source Software and Culture -- Crystal
david50407
1
200
簡潔優雅的語言 —— Crystal
david50407
0
160
各種工具介紹
david50407
1
97
Crystal
david50407
0
280
Mail Server
david50407
0
93
Git 基礎講座
david50407
0
400
PHP Cookie/Session MySQL 資料庫操作
david50407
1
190
Other Decks in Programming
See All in Programming
REALITY コマンド作成チュートリアル
nishiuriraku
0
110
Deoptimization: How YJIT Speeds Up Ruby by Slowing Down / RubyKaigi 2025
k0kubun
0
1k
国漢文混用体からHolloまで
minhee
1
200
Thank you <💅>, What's the Next?
ahoxa
1
540
音声プラットフォームのアーキテクチャ変遷から学ぶ、クラウドネイティブなバッチ処理 (20250422_CNDS2025_Batch_Architecture)
thousanda
0
280
エンジニアが挑む、限界までの越境
nealle
1
270
State of Namespace
tagomoris
4
1.9k
Sharing features among Android applications: experience feedback
jbvincey
0
110
AIコーディングエージェントを 「使いこなす」ための実践知と現在地 in ログラス / How to Use AI Coding Agent in Loglass
rkaga
4
670
メモリウォールを超えて:キャッシュメモリ技術の進歩
kawayu
0
1.9k
Youtube Lofier - Chrome拡張開発
ninikoko
0
2.5k
note の Elasticsearch 更新系を支える技術
tchov
0
130
Featured
See All Featured
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.5k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.4k
Unsuck your backbone
ammeep
670
57k
The Art of Programming - Codeland 2020
erikaheidi
53
13k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.3k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
49k
Raft: Consensus for Rubyists
vanstee
137
6.9k
Build The Right Thing And Hit Your Dates
maggiecrowley
35
2.6k
Scaling GitHub
holman
459
140k
Faster Mobile Websites
deanohume
306
31k
Transcript
GraphQL 為什什麼 Web 這麼多 QQ
GraphQL
Why? Why not just use RESTful API?
RESTful API 使⽤用簡單的規則將資源定位: 抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作, 例例如下⾯面可以⽤用來來建立⼀一個新的群組資源
POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users
RESTful API 使⽤用簡單的規則將資源定位: 抓取⼀一個使⽤用者的資源 GET /users/1 配合 HTTP 動詞來來對資源進⾏行行操作, 例例如下⾯面可以⽤用來來建立⼀一個新的群組資源
POST /groups 抓取⼀一個群組裡⾯面的使⽤用者清單 GET /groups/1/users 很夠了了!
RESTful API 如果我想抓取某個群組裡⾯面的使⽤用者清單以外, 還想要抓取裡⾯面的使⽤用者的資料呢?
從 Client 下⼿手 GET /groups/1/users { "users": [ { "id":
1, "name": "Bob" }, { "id": 2, "name": "Alice" }, { "id": 3, "name": "Katherine" } ] }
從 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 { ... }
從 Client 下⼿手 • 連線延遲 => 花比較多時間 • 網路路品質不好 =>
花比較多次數
從 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" }, { ... } ] }
從 Server 下⼿手 • 需要更更多欄欄位 => 修改 Server API 的程式碼
• 返回所有資料 => 單⼀一請求吞吐量量上升
RESTful 的缺點 • 沒辦法處理理批次請求(沒有規範) • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費
• 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源
RESTful 的缺點 • 沒辦法處理理批次請求(沒有規範) • 沒辦法由 Client 指定返回欄欄位 • 導致⼤大部分資源被浪費
• 無限增長的 Endpoint 數量量 • 每多⼀一種資源/處理理資源的⽅方式 => 多⼀一系列列相關的 Endpoint • 無法很好的處理理巢狀狀資源 浪費資源!
GraphQL 的特點 • 型別系統 • GraphQL 是強型別語⾔言,對於所有返回的物件, 其型別都必須被預先定義 • 內省機制(Introspection)
• 能夠藉由查詢內部結構讓 Client 掌握 API 細節 • 提供巢狀狀資源以及批次請求的⽀支援 • 由 Client 指定返回欄欄位,降低連線負載度
預覽 GraphQL POST /graphql query { group(id: 1) { users
{ id email } } }
預覽 GraphQL { "data": { "group": { "users": [ {
"id": 1, "email": "
[email protected]
" }, { "id": 2, "email": "
[email protected]
" }, { "id": 3, "email": "
[email protected]
" } ] } } }
預覽 GraphQL POST /graphql query { group(id: 1) { users
{ id email } } }
POST /graphql query { group(id: 1) { users { id
email } } } <============= 唯⼀一 Endpoint <================= GraphQL 查詢操作 <============== 查詢參參數 <=============== 欄欄位選取 預覽 GraphQL
GraphQL
Type system type User { id: ID! name: String! email:
String url: String } type Group { id: ID! name: String! users: [User!]! }
Type system • 型別定義: type User { ... } •
定義欄欄位(Field) id: ID! name: String! email: String users: [User!]!
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
Type system • 提供⾃自訂 Scalar type scalar Date • 宣告陣列列
[Type] • 宣告非空 Type! • 組合技! [Type] [Type]! [Type!] [Type!]!
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! }
Type system • Enum enum PostType { NORMAL SHARE }
• Union type union SearchResult = Post | User query { search(text: "an") { id ... on Post { title } ... on User { name } } }
Query & Mutation • GraphQL 提供查詢(Query)以及轉移(Mutation)的 操作來來對資源進⾏行行存取 • root object
提供 query 及 mutation 兩兩個 field query { group(id: 1) { users { id email } } }
Mutation mutation { createUser(name: "Jobs") { id } } {
"data": { "createUser": { "id": 4 } } }
Query & Mutation • Query 是非同步平⾏行行查詢;但 Mutation 會循序執⾏行行 • Query
沒有副作⽤用
Variables query ($type: PostType) { posts(type: $type) { id title
} } { "type": "SHARE" }
Variables query ($type: PostType) { posts(type: $type) { id title
} } { "type": "SHARE" } <== 宣告 $type 型別 <== 純 JSON 沒有型別,需轉型
Connection • Connection 是⼀一種特殊形態的 Query • 表⽰示圖上節點之間的邊
GraphQL
Pagination query { posts { id title } }
Pagination query { posts { id title } } {
"data": { "posts": [ { "id": 1, "title": "Post 1" }, { "id": 2, "title": "Post 2" }, ... ] } }
Pagination query { posts(first: 2) { id title } }
Pagination query { posts(first: 2 offset: 3) { id title
} }
Pagination query { posts(first: 2 after: $postId) { id title
} }
Connection query { postsConnection(first: 2 after: $cursor) { edges {
node { id title } cursor } totalCount pageInfo { endCursor hasNextPage } } }
內省機制 Introspection
內省機制 query { __schema { types { name } }
}
內省機制 { "data": { "__schema": { "types": [ { "name":
"Query" }, { "name": "User" }, { "name": "ID" }, { "name": "String" }, ... ] } } }
內省機制 • Query, User, Group, Mutation, ... • 我們⾃自訂的型別(包含 Query,
Mutation) • String, Boolean, String, ... • Scalar types • __Schema, __Type, __Field, ... • 底線開頭的 Meta Fields,屬內省系統的⼀一部分
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
GraphQL 3Q~