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
PHPに関数型の魂を宿す〜PHP 8.5 で実現する堅牢なコードとは〜 #phpcon_hiroshima / phpcon-hiroshima-2025
shogogg
1
240
SwiftDataを使って10万件のデータを読み書きする
akidon0000
0
120
AIと人間の共創開発!OSSで試行錯誤した開発スタイル
mae616
1
470
いま中途半端なSwift 6対応をするより、Default ActorやApproachable Concurrencyを有効にしてからでいいんじゃない?
yimajo
2
430
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
2分台で1500examples完走!爆速CIを支える環境構築術 - Kaigi on Rails 2025
falcon8823
3
3.7k
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
150
3年ぶりにコードを書いた元CTOが Claude Codeと30分でMVPを作った話
maikokojima
0
350
Web フロントエンドエンジニアに開かれる AI Agent プロダクト開発 - Vercel AI SDK を観察して AI Agent と仲良くなろう! #FEC余熱NIGHT
izumin5210
3
540
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
Claude Agent SDK を使ってみよう
hyshu
0
820
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
303
21k
Building Adaptive Systems
keathley
44
2.8k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
14k
The Language of Interfaces
destraynor
162
25k
The Power of CSS Pseudo Elements
geoffreycrofte
79
6k
How GitHub (no longer) Works
holman
315
140k
The Cost Of JavaScript in 2023
addyosmani
55
9k
Building Applications with DynamoDB
mza
96
6.7k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
30
2.9k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
32
1.6k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
189
55k
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