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
   

   View Slide

2. Aimeos
   E-Commerce framework
   

   View Slide

3. View Slide

4. GraphQL
   

   View Slide

5. Invented by Facebook
   

   View Slide

6. Retrieve graph data efficiently
   

   View Slide

7. For complex queries
   

   View Slide

8. Minimize response data
   

   View Slide

9. {
   product {
   name
   media {
   url
   }
   }
   }
   Queries
   

   View Slide

10. {"data": {
    "product": {
    "name": "Simple product",
    "media": [{
    "url": "http://localhost/img/simple1.jpg"
    },{
    "url": "http://localhost/img/simple2.jpg"
    }]
    }
    }}
    Response
    

    View Slide

11. Advantages
    

    View Slide

12. One API for all
    client requirements
    

    View Slide

13. Efficient requests including
    related resources
    

    View Slide

14. Retrieve only the data
    you really need
    

    View Slide

15. Writing several (related)
    resources at once
    

    View Slide

16. Exact schema definition
    provided by the server
    

    View Slide

17. type Product {
    id: ID
    label: String
    status: Boolean
    }
    Schema
    

    View Slide

18. Well defined query language
    

    View Slide

19. {
    product(code: '1000.001') {
    label
    attribute(type: 'variant') {
    id
    name
    }
    }
    Query
    

    View Slide

20. Many client side
    libraries available
    

    View Slide

21. Disvantages
    

    View Slide

22. No caching by CDNs
    or proxies possible
    

    View Slide

23. Optimizing queries
    can be hard
    

    View Slide

24. Clients can build deep
    and complex queries
    

    View Slide

25. Client and server are
    thighly coupled
    

    View Slide

26. All application state must be
    maintained by the client
    

    View Slide

27. Query language adds
    more complexity
    

    View Slide

28. curl -X POST -H 'Content-Type: application/json'
    -d '{ "query": "{ products { name } }" }'
    http://localhost/graphql
    Query
    

    View Slide

29. Client side caching necessary
    may introduce additional points of failure
    

    View Slide

30. { json:api }
    

    View Slide

31. Invented by Ember.js
    

    View Slide

32. Reduce the amount
    of client code
    

    View Slide

33. Easy client and
    server code
    

    View Slide

34. Use best practices
    

    View Slide

35. curl -H 'Content-Type: application/json'
    http://localhost/jsonapi/product
    Query
    

    View Slide

36. {"data": [{
    "id": 1,
    "type": "product",
    "attributes": {
    "uid": "1",
    "code": "SP01",
    "name": "Simple product",
    }
    }]}
    Response
    

    View Slide

37. Advantages
    

    View Slide

38. Efficient requests including
    related resources
    http://localhost/jsonapi/product?include=price
    

    View Slide

39. {"data": [{
    "id": 1, "type": "product",
    "attributes": { … }
    "relationships": {
    "price": [{"id": "123"}]
    }}],
    "included": [{
    "id": 123, "type": "price",
    "attributes": { … }
    }]}
    Response
    

    View Slide

40. Retrieve only the data
    you really need
    http://localhost/jsonapi/product?fields=id,name
    

    View Slide

41. Caching by
    CDNs, proxies and browsers
    

    View Slide

42. Client and server
    are decoupled
    

    View Slide

43. Application state
    managed by the server
    

    View Slide

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
    

    View Slide

45. Queries can be optimized
    for the required use cases
    

    View Slide

46. API interaction
    is plain simple
    

    View Slide

47. Disvantages
    

    View Slide

48. Only single resource
    can be updated at once
    

    View Slide

49. No specification of the
    query language
    

    View Slide

50. No schema returned
    by the server
    

    View Slide

51. No automatic
    schema validation
    

    View Slide

52. Conclusion
    

    View Slide

53. GraphQL
    

    View Slide

54. Best for internal APIs
    

    View Slide

55. Perfect as single endpoint
    for clients
    

    View Slide

56. Lacks of scalability
    

    View Slide

57. { json:api }
    

    View Slide

58. Clients and servers can
    evolve independently
    

    View Slide

59. Can scale infinitely
    

    View Slide

60. Not for write heavy usage
    

    View Slide

61. View Slide

62. JSON:API
    Keep for the frontend
    

    View Slide

63. GraphQL
    Use for the admin backend
    

    View Slide

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

    View Slide