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
650
gigacommerce
aimeos
0
3.2k
High performance e-commerce in Laravel
aimeos
0
920
E-Commerce in TYPO3 mit Aimeos (Deutsch)
aimeos
0
450
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
「テストは愚直&&網羅的に書くほどよい」という誤解 / Test Smarter, Not Harder
munetoshi
0
180
Rails Frontend Evolution: It Was a Setup All Along
skryukov
0
160
LT 2025-06-30: プロダクトエンジニアの役割
yamamotok
0
780
Agentic Coding: The Future of Software Development with Agents
mitsuhiko
0
110
設計やレビューに悩んでいるPHPerに贈る、クリーンなオブジェクト設計の指針たち
panda_program
6
2.2k
PipeCDのプラグイン化で目指すところ
warashi
1
280
10 Costly Database Performance Mistakes (And How To Fix Them)
andyatkinson
0
390
Discover Metal 4
rei315
2
140
Result型で“失敗”を型にするPHPコードの書き方
kajitack
5
920
Porting a visionOS App to Android XR
akkeylab
0
470
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
930
git worktree × Claude Code × MCP ~生成AI時代の並列開発フロー~
hisuzuya
1
580
Featured
See All Featured
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
820
StorybookのUI Testing Handbookを読んだ
zakiyama
30
5.9k
Adopting Sorbet at Scale
ufuk
77
9.5k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
KATA
mclloyd
30
14k
Automating Front-end Workflow
addyosmani
1370
200k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Faster Mobile Websites
deanohume
307
31k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
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