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
230
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
150
Responsive E-Mails
aimeos
0
660
gigacommerce
aimeos
0
3.2k
High performance e-commerce in Laravel
aimeos
0
920
E-Commerce in TYPO3 mit Aimeos (Deutsch)
aimeos
0
460
Aimeos - high performance e-commerce in TYPO3
aimeos
0
310
Aimeos e-commerce components
aimeos
1
210
E-Commerce in TYPO3 - Reloaded
aimeos
0
310
Micro services as architectural concept
aimeos
0
700
Other Decks in Programming
See All in Programming
SpecKitでどこまでできる? コストはどれくらい?
leveragestech
0
640
CSC509 Lecture 02
javiergs
PRO
0
410
なぜあの開発者はDevRelに伴走し続けるのか / Why Does That Developer Keep Running Alongside DevRel?
nrslib
3
390
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
220
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
490
階層構造を表現するデータ構造とリファクタリング 〜1年で10倍成長したプロダクトの変化と課題〜
yuhisatoxxx
3
960
10年もののAPIサーバーにおけるCI/CDの改善の奮闘
mbook
0
800
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
130
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
10
6.4k
エンジニアとして高みを目指す、 利益を生み出す設計の考え方 / design-for-profit
minodriven
24
12k
スマホから Youtube Shortsを見られないようにする
lemolatoon
4
1.2k
GitHub Actions × AWS OIDC連携の仕組みと経緯を理解する
ota1022
0
250
Featured
See All Featured
A Tale of Four Properties
chriscoyier
160
23k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Optimizing for Happiness
mojombo
379
70k
Become a Pro
speakerdeck
PRO
29
5.5k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Straight Up "How To Draw Better" Workshop
denniskardys
237
140k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Side Projects
sachag
455
43k
Typedesign – Prime Four
hannesfritz
42
2.8k
How STYLIGHT went responsive
nonsquared
100
5.8k
Why You Should Never Use an ORM
jnunemaker
PRO
59
9.6k
A better future with KSS
kneath
239
18k
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