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!