GraphQL vs. JSON:API

303c2b37c0e83e752cbc15c7feb022b8?s=47 Aimeos
September 04, 2020

GraphQL vs. JSON:API

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

303c2b37c0e83e752cbc15c7feb022b8?s=128

Aimeos

September 04, 2020
Tweet

Transcript

  1. GraphQL vs. JSON:API

  2. Aimeos E-Commerce framework

  3. None
  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

  61. None
  62. JSON:API Keep for the frontend

  63. GraphQL Use for the admin backend

  64. Aimeos aimeos.org Twitter: @aimeos facebook.com/Aimeos