GraphQL vs. JSON:API

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