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
360
2016 計中短期資訊推廣課程 —— 多人線上繪圖板
david50407
0
130
Open Source Software and Culture -- Crystal
david50407
1
200
簡潔優雅的語言 —— Crystal
david50407
0
160
各種工具介紹
david50407
1
93
Crystal
david50407
0
280
Mail Server
david50407
0
87
Git 基礎講座
david50407
0
380
PHP Cookie/Session MySQL 資料庫操作
david50407
1
190
Other Decks in Programming
See All in Programming
CSC509 Lecture 13
javiergs
PRO
0
110
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
200
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
5
2.2k
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
とにかくAWS GameDay!AWSは世界の共通言語! / Anyway, AWS GameDay! AWS is the world's lingua franca!
seike460
PRO
1
900
cmp.Or に感動した
otakakot
3
210
Snowflake x dbtで作るセキュアでアジャイルなデータ基盤
tsoshiro
2
520
TypeScriptでライブラリとの依存を限定的にする方法
tutinoko
3
700
PHP でアセンブリ言語のように書く技術
memory1994
PRO
1
170
3rd party scriptでもReactを使いたい! Preact + Reactのハイブリッド開発
righttouch
PRO
1
610
Amazon Bedrock Agentsを用いてアプリ開発してみた!
har1101
0
340
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
250
Featured
See All Featured
Designing for Performance
lara
604
68k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
44
2.2k
Happy Clients
brianwarren
98
6.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
Designing Experiences People Love
moore
138
23k
Building Applications with DynamoDB
mza
90
6.1k
Code Reviewing Like a Champion
maltzj
520
39k
Why Our Code Smells
bkeepers
PRO
334
57k
Documentation Writing (for coders)
carmenintech
65
4.4k
Rails Girls Zürich Keynote
gr2m
94
13k
What's in a price? How to price your products and services
michaelherold
243
12k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
8.2k
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~