Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up
for free
GraphQL vs. JSON:API
Aimeos
September 04, 2020
Programming
1
61
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
aimeos
1
44
aimeos
0
610
aimeos
0
3.1k
aimeos
0
840
aimeos
0
300
aimeos
0
230
aimeos
1
160
aimeos
0
260
aimeos
0
580
Other Decks in Programming
See All in Programming
mu2in
0
140
zsmb
1
130
yamotuki
0
130
yaamaa
0
440
line_developers_tw
0
1.3k
hanakla
2
3k
atskimura
0
300
nbkouhou
0
940
horie1024
1
390
adoranwodo
0
220
loleg
0
210
hr01
1
1.3k
Featured
See All Featured
3n
163
22k
lauravandoore
11
1.3k
tanoku
86
8.5k
lara
590
61k
zakiwarfel
88
3.3k
malarkey
192
8.6k
addyosmani
1348
190k
mongodb
23
3.8k
addyosmani
310
21k
geeforr
332
29k
tammielis
237
23k
cherdarchuk
71
260k
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