Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GraphQL vs. JSON:API

Aimeos
September 04, 2020

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

More Decks by Aimeos

Other Decks in Programming

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