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
120
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
410
2016 計中短期資訊推廣課程 —— 多人線上繪圖板
david50407
0
140
Open Source Software and Culture -- Crystal
david50407
1
210
簡潔優雅的語言 —— Crystal
david50407
0
170
各種工具介紹
david50407
1
100
Crystal
david50407
0
290
Mail Server
david50407
0
97
Git 基礎講座
david50407
0
400
PHP Cookie/Session MySQL 資料庫操作
david50407
1
200
Other Decks in Programming
See All in Programming
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
210
Claude Codeで実装以外の開発フロー、どこまで自動化できるか?失敗と成功
ndadayo
2
1.4k
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
TanStack DB ~状態管理の新しい考え方~
bmthd
2
330
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
CSC305 Summer Lecture 06
javiergs
PRO
0
100
コーディングは技術者(エンジニア)の嗜みでして / Learning the System Development Mindset from Rock Lady
mackey0225
2
580
実践!App Intents対応
yuukiw00w
1
350
CSC305 Summer Lecture 05
javiergs
PRO
0
110
Rancher と Terraform
fufuhu
0
110
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.2k
ソフトウェアテスト徹底指南書の紹介
goyoki
1
110
Featured
See All Featured
Designing for humans not robots
tammielis
253
25k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
139
34k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
33
2.4k
Embracing the Ebb and Flow
colly
87
4.8k
Docker and Python
trallard
45
3.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
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~