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
200
簡潔優雅的語言 —— Crystal
david50407
0
170
各種工具介紹
david50407
1
100
Crystal
david50407
0
280
Mail Server
david50407
0
96
Git 基礎講座
david50407
0
400
PHP Cookie/Session MySQL 資料庫操作
david50407
1
200
Other Decks in Programming
See All in Programming
新メンバーも今日から大活躍!SREが支えるスケールし続ける組織のオンボーディング
honmarkhunt
5
7.4k
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
190
Webの外へ飛び出せ NativePHPが切り拓くPHPの未来
takuyakatsusa
2
550
ruby.wasmで多人数リアルタイム通信ゲームを作ろう
lnit
3
480
第9回 情シス転職ミートアップ 株式会社IVRy(アイブリー)の紹介
ivry_presentationmaterials
1
320
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
340
AIと”コードの評価関数”を共有する / Share the "code evaluation function" with AI
euglena1215
1
170
#QiitaBash MCPのセキュリティ
ryosukedtomita
1
1.3k
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
640
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
530
Code as Context 〜 1にコードで 2にリンタ 34がなくて 5にルール? 〜
yodakeisuke
0
130
20250704_教育事業におけるアジャイルなデータ基盤構築
hanon52_
5
790
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
25
1.7k
Code Reviewing Like a Champion
maltzj
524
40k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
690
Facilitating Awesome Meetings
lara
54
6.4k
BBQ
matthewcrist
89
9.7k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Bash Introduction
62gerente
613
210k
GitHub's CSS Performance
jonrohan
1031
460k
Designing for Performance
lara
610
69k
How to train your dragon (web standard)
notwaldorf
95
6.1k
Navigating Team Friction
lara
187
15k
The Pragmatic Product Professional
lauravandoore
35
6.7k
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~