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
400
2016 計中短期資訊推廣課程 —— 多人線上繪圖板
david50407
0
140
Open Source Software and Culture -- Crystal
david50407
1
200
簡潔優雅的語言 —— Crystal
david50407
0
170
各種工具介紹
david50407
1
99
Crystal
david50407
0
280
Mail Server
david50407
0
96
Git 基礎講座
david50407
0
400
PHP Cookie/Session MySQL 資料庫操作
david50407
1
190
Other Decks in Programming
See All in Programming
エラーって何種類あるの?
kajitack
5
300
関数型まつりレポート for JuliaTokai #22
antimon2
0
150
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
150
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
570
Benchmark
sysong
0
250
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
230
DroidKnights 2025 - 다양한 스크롤 뷰에서의 영상 재생
gaeun5744
3
310
Create a website using Spatial Web
akkeylab
0
300
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
170
データの民主化を支える、透明性のあるデータ利活用への挑戦 2025-06-25 Database Engineering Meetup#7
y_ken
0
310
「ElixirでIoT!!」のこれまでとこれから
takasehideki
0
370
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
350
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
512
110k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
130
19k
Unsuck your backbone
ammeep
671
58k
Six Lessons from altMBA
skipperchong
28
3.8k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
670
RailsConf 2023
tenderlove
30
1.1k
Thoughts on Productivity
jonyablonski
69
4.7k
Practical Orchestrator
shlominoach
188
11k
Automating Front-end Workflow
addyosmani
1370
200k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
A Modern Web Designer's Workflow
chriscoyier
694
190k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
20
1.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~