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.

1. @mauroservienti#webappconf17
GraphQL
Where are you from? Where are you going?
(1 fiorino, cit.)

2. @mauroservienti#webappconf17
we have no control over

3. @mauroservienti#webappconf17
We go on thinking to…
1. APIs to represent requests and actions
2. Models exchanged with clients

4. @mauroservienti#webappconf17
API
(e.g. Rest over HTTP)
Response
Request
Model
Client
Hard to evolve
monolith(s)

5. @mauroservienti#webappconf17
Rest + HTTP
semantic is not
good enough

6. @mauroservienti#webappconf17
Let me introduce you GraphQL

7. @mauroservienti#webappconf17
Describe

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. @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. @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. @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. @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. @mauroservienti#webappconf17
Ask

14. @mauroservienti#webappconf17
Ask
{
product( id: 123 ),
title,
unitPrice: {
value,
currency
},
stars,
bestReview: reviews( quality: best ){
title
},
worstReview: reviews( quality: worst ){
title
}
}

15. @mauroservienti#webappconf17
Ask
{
product( id: 123 ),
title,
unitPrice: {
value,
currency
},
stars,
bestReview: reviews( quality: best ){
title
},
worstReview: reviews( quality: worst ){
title
}
}

16. @mauroservienti#webappconf17
Ask
{
product( id: 123 ),
title,
unitPrice: {
value,
currency
},
stars,
bestReview: reviews( quality: best ){
title
},
worstReview: reviews( quality: worst ){
title
}
}

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. @mauroservienti#webappconf17
Act

19. @mauroservienti#webappconf17
Act
mutation{
post: addToCart(
id: 123,
quantity: 2
){
cartId,
itemTotalPrice,
cartTotalPrice
}
}

20. @mauroservienti#webappconf17
Act
mutation{
post: addToCart(
id: 123,
quantity: 2
){
cartId,
itemTotalPrice,
cartTotalPrice
}
}

21. @mauroservienti#webappconf17
Act
mutation{
post: addToCart(
id: 123,
quantity: 2
){
cartId,
itemTotalPrice,
cartTotalPrice
}
}

22. @mauroservienti#webappconf17
Act
mutation{
post: addToCart(
id: 123,
quantity: 2
){
cartId,
itemTotalPrice,
cartTotalPrice
}
}
response

23. @mauroservienti#webappconf17
Systems evolution

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. @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. @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. @mauroservienti#webappconf17
Breaking
const resolverMap = {
Product: {
customersAlsoBuy( obj, args, context, info ){
//do whatever you want :)
return ….;
},
},
};

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. @mauroservienti#webappconf17
Mauro Servienti
Solution Architect @ Particular Software
makers of NServiceBus
mauro.servienti@particular.net
//blogs.ugidotnet.org/topics
//milestone.topics.it

30. @mauroservienti#webappconf17
Thank you!