Current trends in software and backend architecture have been evolving towards a more loosely coupled more granular design. I am sure most of you have heard of microservice based architectures. The latest development on that front in the past couple of years has been the advent of serverless which allows you to run applications in very cost effective ephemeral services. This is why it is important to have a proper gateway for your API that is able to route all your requests to the designated endpoint. GraphQL stands out in that respect as being a mature open sourced standard started at Facebook. We will first have a look at how we set up our own GraphQL server locally, then we will explore the Query language and schema definitions it provides which allows you essentially query your mesh of services from a single point of entry. The beauty of that is it will notify you early if any of your endpoints is misbehaving or the schemas are out of date by erroring out. Another advantage of this is that it allows for your API documentation to be a real time process and it will give you what one may call an API playground where you can query and explore your API. After we explore our serverless API we will have a look at the more advanced features and standards around mutators and resolvers and then we will close by going all in, full serverless and deploy our graphql server to a function in the cloud.

1. Build Scalable
APIs using
GraphQL and
Serverless

2. @simona_cotin

3. @simona_cotin

4. @simona_cotin

5. @simona_cotin
JS

6. @simona_cotin

7. @simona_cotin

8. @simona_cotin

9. @simona_cotin
–-Lee Byron
a data-fetching API powerful
enough to describe all of
Facebook

10. @simona_cotin

11. @simona_cotin
https://facebook.com/user/id
https://facebook.com/user/id/events
https://facebook.com/user/id/friends-suggestions
https://facebook.com/user/id/friends-birthdays

12. @simona_cotin
https://facebook.com/user/id/events
{
"name": “ServerlessDays",
"location": "Cardiff",
"organiser": "Matt",
"attendees": [
{
"name": “Ant Stanley",
"company": "!",
"role": “Father of ServerlessDays”
}
]
}

13. @simona_cotin

14. @simona_cotin
Overfetch
Or
New endpoint

15. @simona_cotin

16. @simona_cotin
https://facebook.com/user/id/friends-suggestions
{
"name": "Golnaz Badazadeh",
"profile_pic": "some_url",
"mutual_friends": []
}

17. @simona_cotin
https://facebook.com/user/id/friends-suggestions/id/mutual
{
"mutual_friends": [
{
"name": "Sarah Drasner",
"profile_pic": "some_url",
"tag": "Amazing!"
}
]
}

18. @simona_cotin
Underfetch
Or
New endpoint

19. @simona_cotin
Delay User Perception
0-100 ms Instant
100-300 ms Small perceptible delay
300-1000 ms Machine is working
1000+ ms Likely context switch
10000+ ms Task is abandoned
High performance Browser Networking

20. @simona_cotin
–-Ilya Grigorik
The fastest network request is a
request not made

21. @simona_cotin
query {
user(id:1) {
name
events {
count
}
friends_suggestions {
name
mutual_friends {
count
}
}
}
}
{
"data": {
"user": {
"name": "Simona Cotin",
"events": {
"count": 4
},
"friends_suggestions": {
"name": "Golnaz Babazadeh",
"mutual_friends": {
"count": 15
}
}
}
}
}

22. @simona_cotin
Schema driven
development

23. @simona_cotin
Strongly typed

24. @simona_cotin
type People {
id: ID!
name: String
avatar: URL
}

25. @simona_cotin
type People {
id: ID!
name: String
avatar: URL
}
type Team {
id: ID!
name: String
points: Int
people: [People]
}

26. @simona_cotin
type Query {
teams: [Team]
}
type Mutation {
incrementPoints(id: ID!): Team
}

27. @simona_cotin
const root = {
teams: async () =>" {
let teams = await axios.get(
'https://graphqlvoting.azurewebsites.net/
api/score'
);
return teams.data;
},
incrementPoints: async obj =>" {
let response = await axios.get(
`https://graphqlvoting.azurewebsites.net/
api/score/${obj.id}`
);
return response.data;
}
};

28. @simona_cotin

29. @simona_cotin

30. @simona_cotin

31. @simona_cotin
✓ Performance
✓ Flexibility
✓ Tooling

32. @simona_cotin
Serverless

33. @simona_cotin
–-Steve Jobs
The line of code that’s the
fastest to write, that never breaks,
that doesn’t need maintenance,
is the line you never had to write.

34. @simona_cotin
module.exports = async function(context, req) {
context.res = {
body: 'Hello ' + req.query.name
};
};

36. @simona_cotin
Right-Click
Deploy

38. @simona_cotin
Github
Deploy

39. @simona_cotin

40. @simona_cotin
Datasources
3rd party APIs

41. @simona_cotin

42. @simona_cotin
{
"type": "cosmosDB",
"name": "inputDocument",
"databaseName": "admin",
"collectionName": "Recipes",
"connectionStringSetting": "tacos-sql_DOCUMENTDB",
“direction": "in"
}

43. @simona_cotin
module.exports = async function(context, req) {
context.res = {
body: context.bindings.inputDocument
};
};

44. @simona_cotin
✓ Reusable API
✓ VS Code dev & debug
✓ Easy Integration
Datasources

45. @simona_cotin
No servers
to
manage

46. @simona_cotin
Serverless

47. @simona_cotin

48. @simona_cotin

49. @simona_cotin

50. @simona_cotin

51. @simona_cotin

52. @simona_cotin
module.exports = async function(context, req) {
const body = req.body;
let response = await graphql(
typeDefs,
body.query,
root,
null,
body.variables,
body.operationName
);
context.res = {
body: response
};
};

53. @simona_cotin

54. @simona_cotin

55. @simona_cotin

56. @simona_cotin

57. @simona_cotin
Easy Integration of Datasources
Autoscalability
Less code
Easy Abstraction of Datasources
Single Endpoint
Smaller no requests
Serverless GraphQL

58. @simona_cotin
Easy Integration of Datasources
Easy Abstraction of Datasources
Autoscalability
Single Endpoint
Less code
Smaller no requests
Dev productivity

59. @simona_cotin
Achieve more
by
doing less

60. @simona_cotin
https://github.com/simonaco/serverless-
graphql-workshop