GraphQL vs. JSON:API

Compares how GraphQL and the JSON REST API standard fits for e-commerce and CMS applications

Transcript

1. GraphQL vs. JSON:API
2. Aimeos E-Commerce framework
4. GraphQL
5. Invented by Facebook
6. Retrieve graph data efficiently
7. For complex queries
8. Minimize response data
9. { product { name media { url } } } Queries
10. {"data": { "product": { "name": "Simple product", "media": [{ "url": "http://localhost/img/simple1.jpg" },{ "url": "http://localhost/img/simple2.jpg" }] } }} Response
11. Advantages
12. One API for all client requirements
13. Efficient requests including related resources
14. Retrieve only the data you really need
15. Writing several (related) resources at once
16. Exact schema definition provided by the server
17. type Product { id: ID label: String status: Boolean } Schema
18. Well defined query language
19. { product(code: '1000.001') { label attribute(type: 'variant') { id name } } Query
20. Many client side libraries available
21. Disvantages
22. No caching by CDNs or proxies possible
23. Optimizing queries can be hard
24. Clients can build deep and complex queries
25. Client and server are thighly coupled
26. All application state must be maintained by the client
27. Query language adds more complexity
28. curl -X POST -H 'Content-Type: application/json' -d '{ "query": "{ products { name } }" }' http://localhost/graphql Query
29. Client side caching necessary may introduce additional points of failure
30. { json:api }
31. Invented by Ember.js
32. Reduce the amount of client code
33. Easy client and server code
34. Use best practices
35. curl -H 'Content-Type: application/json' http://localhost/jsonapi/product Query
36. {"data": [{ "id": 1, "type": "product", "attributes": { "uid": "1", "code": "SP01", "name": "Simple product", } }]} Response
37. Advantages
38. Efficient requests including related resources http://localhost/jsonapi/product?include=price
39. {"data": [{ "id": 1, "type": "product", "attributes": { … } "relationships": { "price": [{"id": "123"}] }}], "included": [{ "id": 123, "type": "price", "attributes": { … } }]} Response
40. Retrieve only the data you really need http://localhost/jsonapi/product?fields=id,name
41. Caching by CDNs, proxies and browsers
42. Client and server are decoupled
43. Application state managed by the server
44. 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
45. Queries can be optimized for the required use cases
46. API interaction is plain simple
47. Disvantages
48. Only single resource can be updated at once
49. No specification of the query language
50. No schema returned by the server
51. No automatic schema validation
52. Conclusion
53. GraphQL
54. Best for internal APIs
55. Perfect as single endpoint for clients
56. Lacks of scalability
57. { json:api }
58. Clients and servers can evolve independently
59. Can scale infinitely
60. Not for write heavy usage
62. JSON:API Keep for the frontend
63. GraphQL Use for the admin backend
64. Aimeos aimeos.org Twitter: @aimeos facebook.com/Aimeos