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 vs. JSON:API
Search
Aimeos
September 04, 2020
Programming
1
190
GraphQL vs. JSON:API
Compares how GraphQL and the JSON REST API standard fits for e-commerce and CMS applications
Aimeos
September 04, 2020
Tweet
Share
More Decks by Aimeos
See All by Aimeos
PHP Map
aimeos
1
110
Responsive E-Mails
aimeos
0
630
gigacommerce
aimeos
0
3.1k
High performance e-commerce in Laravel
aimeos
0
890
E-Commerce in TYPO3 mit Aimeos (Deutsch)
aimeos
0
400
Aimeos - high performance e-commerce in TYPO3
aimeos
0
290
Aimeos e-commerce components
aimeos
1
200
E-Commerce in TYPO3 - Reloaded
aimeos
0
290
Micro services as architectural concept
aimeos
0
670
Other Decks in Programming
See All in Programming
自作ソフト(VMagicMirror)がVRMA対応してる話+実装のTips
bakudreameater
0
110
Kotlinを用いたDSL的な設計手法と使用上の注意
kohii00
3
530
コミュニティに参加したことで起きた変化
ohmori_yusuke
3
130
PHPerKaigi 2024〜10年以上動いているレガシーなバッチシステムを Kubernetes(Amazon EKS) に移行する取り組み〜
tshinowpub
1
220
WasmOS: Wasmを実行する自作Microkernel
riru
0
370
incrementalモデルの理解を深める
ikkimiyazaki
2
640
DDD, necessary but insufficient: physical design principles for microservices
cer
PRO
0
2.2k
PHP8の機能を使って堅牢にコードを書く
fendo181
6
2.6k
Laravel OpenAPIによる"辛くない"スキーマ駆動開発
kentaroutakeda
2
2.1k
生成 AI の中身を覗いてみよう〜基礎から医療現場での応用まで〜
soh9834
2
760
BuefyのMaintainerを引き継いだ件
kikuomax
0
520
Ruby製社内ツールのGo移行
bgpat
2
260
Featured
See All Featured
Large-scale JavaScript Application Architecture
addyosmani
501
110k
Fashionably flexible responsive web design (full day workshop)
malarkey
397
65k
VelocityConf: Rendering Performance Case Studies
addyosmani
319
23k
Creatively Recalculating Your Daily Design Routine
revolveconf
209
11k
Web Components: a chance to create the future
zenorocha
304
41k
Product Roadmaps are Hard
iamctodd
43
9.6k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
34
8.8k
Fireside Chat
paigeccino
19
2.6k
Robots, Beer and Maslow
schacon
PRO
154
7.9k
Docker and Python
trallard
33
2.6k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Typedesign – Prime Four
hannesfritz
36
2k
Transcript
GraphQL vs. JSON:API
Aimeos E-Commerce framework
None
GraphQL
Invented by Facebook
Retrieve graph data efficiently
For complex queries
Minimize response data
{ product { name media { url } } }
Queries
{"data": { "product": { "name": "Simple product", "media": [{ "url":
"http://localhost/img/simple1.jpg" },{ "url": "http://localhost/img/simple2.jpg" }] } }} Response
Advantages
One API for all client requirements
Efficient requests including related resources
Retrieve only the data you really need
Writing several (related) resources at once
Exact schema definition provided by the server
type Product { id: ID label: String status: Boolean }
Schema
Well defined query language
{ product(code: '1000.001') { label attribute(type: 'variant') { id name
} } Query
Many client side libraries available
Disvantages
No caching by CDNs or proxies possible
Optimizing queries can be hard
Clients can build deep and complex queries
Client and server are thighly coupled
All application state must be maintained by the client
Query language adds more complexity
curl -X POST -H 'Content-Type: application/json' -d '{ "query": "{
products { name } }" }' http://localhost/graphql Query
Client side caching necessary may introduce additional points of failure
{ json:api }
Invented by Ember.js
Reduce the amount of client code
Easy client and server code
Use best practices
curl -H 'Content-Type: application/json' http://localhost/jsonapi/product Query
{"data": [{ "id": 1, "type": "product", "attributes": { "uid": "1",
"code": "SP01", "name": "Simple product", } }]} Response
Advantages
Efficient requests including related resources http://localhost/jsonapi/product?include=price
{"data": [{ "id": 1, "type": "product", "attributes": { … }
"relationships": { "price": [{"id": "123"}] }}], "included": [{ "id": 123, "type": "price", "attributes": { … } }]} Response
Retrieve only the data you really need http://localhost/jsonapi/product?fields=id,name
Caching by CDNs, proxies and browsers
Client and server are decoupled
Application state managed by the server
Hypermedia As The Engine Of Application State "links": { "self":
"http://localhost/jsonapi/product/13", "next": "http://localhost/jsonapi/product/21", "basket/product": "http://localhost/jsonapi/basket/default/product" } HATEOAS
Queries can be optimized for the required use cases
API interaction is plain simple
Disvantages
Only single resource can be updated at once
No specification of the query language
No schema returned by the server
No automatic schema validation
Conclusion
GraphQL
Best for internal APIs
Perfect as single endpoint for clients
Lacks of scalability
{ json:api }
Clients and servers can evolve independently
Can scale infinitely
Not for write heavy usage
None
JSON:API Keep for the frontend
GraphQL Use for the admin backend
Aimeos aimeos.org Twitter: @aimeos facebook.com/Aimeos