Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

GraphQL - Where are you from? Where are you going?

331 views

Published on

GraphQL, inventato da Facebook per risolvere un problema molto specifico, è diventato uno standard. Le applicazioni client lo utilizzano per leggere e manipolare i dati esposti dai server back-end. È così flessibile che recentemente GitHub l'ha adottata per tutte le sue API. Il paradigma è semplice e tuttavia potente tale da consentire la manipolazione flessibile e la loro composizione da molte fonti diverse. Mauro offre in questo intervento un'introduzione a GraphQL, partendo da una breve storia e poi analizzando come GraphQL risolva i tipici problemi in cui i progettisti API e i loro consumer si possono imbattere.

Published in: Software
  • Be the first to comment

  • Be the first to like this

GraphQL - Where are you from? Where are you going?

  1. 1. @mauroservienti#webappconf17 GraphQL Where are you from? Where are you going? (1 fiorino, cit.)
  2. 2. @mauroservienti#webappconf17 we have no control over
  3. 3. @mauroservienti#webappconf17 We go on thinking to… 1. APIs to represent requests and actions 2. Models exchanged with clients
  4. 4. @mauroservienti#webappconf17 API (e.g. Rest over HTTP) Response Request Model Client Hard to evolve monolith(s)
  5. 5. @mauroservienti#webappconf17 Rest + HTTP semantic is not good enough
  6. 6. @mauroservienti#webappconf17 Let me introduce you GraphQL
  7. 7. @mauroservienti#webappconf17 Describe
  8. 8. @mauroservienti#webappconf17 Describe type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  9. 9. @mauroservienti#webappconf17 Describe type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  10. 10. @mauroservienti#webappconf17 Describe type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  11. 11. @mauroservienti#webappconf17 Describe type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  12. 12. @mauroservienti#webappconf17 Describe type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  13. 13. @mauroservienti#webappconf17 Ask
  14. 14. @mauroservienti#webappconf17 Ask { product( id: 123 ), title, unitPrice: { value, currency }, stars, bestReview: reviews( quality: best ){ title }, worstReview: reviews( quality: worst ){ title } }
  15. 15. @mauroservienti#webappconf17 Ask { product( id: 123 ), title, unitPrice: { value, currency }, stars, bestReview: reviews( quality: best ){ title }, worstReview: reviews( quality: worst ){ title } }
  16. 16. @mauroservienti#webappconf17 Ask { product( id: 123 ), title, unitPrice: { value, currency }, stars, bestReview: reviews( quality: best ){ title }, worstReview: reviews( quality: worst ){ title } }
  17. 17. @mauroservienti#webappconf17 Use { id: 123, title: ‘portabanana’, unitPrice: { 10, Euro }, stars: 3.8, bestReview: [{ title: ‘meraviglioso mi ha cambiato la vita’ }], worstReview: [{ title: ‘a me mi pare una…’ }] }
  18. 18. @mauroservienti#webappconf17 Act
  19. 19. @mauroservienti#webappconf17 Act mutation{ post: addToCart( id: 123, quantity: 2 ){ cartId, itemTotalPrice, cartTotalPrice } }
  20. 20. @mauroservienti#webappconf17 Act mutation{ post: addToCart( id: 123, quantity: 2 ){ cartId, itemTotalPrice, cartTotalPrice } }
  21. 21. @mauroservienti#webappconf17 Act mutation{ post: addToCart( id: 123, quantity: 2 ){ cartId, itemTotalPrice, cartTotalPrice } }
  22. 22. @mauroservienti#webappconf17 Act mutation{ post: addToCart( id: 123, quantity: 2 ){ cartId, itemTotalPrice, cartTotalPrice } } response
  23. 23. @mauroservienti#webappconf17 Systems evolution
  24. 24. @mauroservienti#webappconf17 Non-breaking / additive type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] }
  25. 25. @mauroservienti#webappconf17 Non-breaking / additive type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] customersAlsoBuy: [Product] }
  26. 26. @mauroservienti#webappconf17 Breaking type Product { id: string, title: string, description: string, unitPrice: price, delivery: deliveryEnum, weight: float, stars: float, reviews: [{ title: string, quality: sentimentEnum, text: string, }] customersAlsoBuy: [Product] }
  27. 27. @mauroservienti#webappconf17 Breaking const resolverMap = { Product: { customersAlsoBuy( obj, args, context, info ){ //do whatever you want :) return ….; }, }, };
  28. 28. @mauroservienti#webappconf17 Recap • It’s a specification, not an implementation • Clients, within schema bounds, decide what they want • When schema evolves services can easily be backward compatible • A Node.js reference implementation is provided • @ graphql.org: • Samples • Implementations for different stacks (graphql.org/code/) • Intro tutorials and guidance
  29. 29. @mauroservienti#webappconf17 Mauro Servienti Solution Architect @ Particular Software makers of NServiceBus mauro.servienti@particular.net //blogs.ugidotnet.org/topics //milestone.topics.it
  30. 30. @mauroservienti#webappconf17 Thank you!

×