Build Scalable APIs using GraphQL and Serverless

⚡ Build scalable APIs using GraphQL and Serverless

330m users 6k tweets/s 350k tweets/minute 200b tweets/year

Simona Cotin Cloud Dev Advocate @ Microsoft @simona_cotin

@simona_cotin 2014

@simona_cotin

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

@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

@simona_cotin https://facebook.com/user/id/events 1 { 2 "name": "ServerlessDays", 3 "location": "Toronto",
4 "organiser": “Ahmad Nassri", 5 "size": "300", 6 "attendees": [ 7 { 8 "name": “Maxime", 9 "company": "Microsoft", 10 "role": “Durable Functions Chef" 11 } 12 ], 13 "..." 14 }

@simona_cotin ⚠ Options Overfetch Add new endpoint

@simona_cotin https://facebook.com/user/id/friends-suggestions 1 { 2 "firstname": "Peggy", 3 "lastname": "Rayzis",
4 "profile_pic": "some_url", 5 “mutual_friends”: [] 6 } 1 { 2 "mutual_friends": [ 3 { 4 "name": "Mike Watson", 5 "company": "Apollo", 6 "role": "Apollo Chef", 7 "..." 8 } 9 ] 10 } https://facebook.com/user/id/mutual-friends

@simona_cotin Underfetch Add new endpoint ⚠ Options

@simona_cotin GraphQL makes overfetching/underfetching history

@simona_cotin 1 query { 2 user(id: "101") { 3 firstname
4 lastname 5 events { 6 count 7 } 8 friends_suggestions { 9 name 10 mutual_friends { 11 count 12 } 13 } 14 } 15 } https://facebook.com/graphql 1 { 2 "data": { 3 "user": { 4 "firstname": "Simona", 5 "lastname": "Cotin", 6 "events": { 7 "count": "4" 8 }, 9 "friends_suggestions": { 10 "name": "Zachary Deptawa", 11 "mutual_friends": { 12 "count": "12" 13 } 14 } 15 } 16 } 17 }

@simona_cotin

@simona_cotin How do I get started?

@simona_cotin

@simona_cotin Schema driven development

@simona_cotin Strongly typed

@simona_cotin Typed API

@simona_cotin Static analysis of queries

@simona_cotin const { buildSchema } = require('graphql'); const typeDefs =
buildSchema(` type Team { id: ID! name: String points: Int } type Query { teams: [Team] } type Mutation { incrementPoints(id: ID!): Team } `);

@simona_cotin type Team { id: ID! name: String points: Int
}

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

@simona_cotin QUERIES

@simona_cotin type Query { teams: [Team] }

@simona_cotin 1 query { 2 teams { 3 name 4
points 5 } 6 } 1 { 2 "data": { 3 "teams": [ 4 { 5 "name": "red", 6 "points": 232 7 }, 8 { 9 "name": "green", 10 "points": 255 11 } 12 ] 13 } 14 }

@simona_cotin M U T A T I O N

@simona_cotin type Mutation { incrementPoints(id: ID!): Team }

@simona_cotin 1 mutation { 2 incrementPoints(id:2) { 3 id 4
name 5 points 6 } 7 } 1 { 2 "data": { 3 "incrementPoints": { 4 "id": "2", 5 "name": "green", 6 "points": 256 7 } 8 } 9 }

@simona_cotin const root = { teams: (obj, args, context) =>
{ return axios .get('https://graphqlvoting.azurewebsites.net/ api/score') .then(res => res.data); }, incrementPoints: (obj, args, context) => { return axios .get(`https://graphqlvoting.azurewebsites.net/ api/score/${obj.id}`) .then(res => res.data); } };

@simona_cotin

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

@simona_cotin /graphql

@simona_cotin { "bindings": [ { "authLevel": "anonymous", "type": "httpTrigger", "direction":
"in", "name": "req", "methods": ["get", "post"], "route": "graphql" }, { "type": "http", "direction": "out", "name": "res" } ] }

@simona_cotin GraphiQL

@simona_cotin

@simona_cotin https://graphqlvoting.blob.core.windows.net/static/index.html

@simona_cotin https://graphqlvoting.blob.core.windows.net/static/index.html /graphiql

@simona_cotin Proxies

@simona_cotin { "$schema": "http://json.schemastore.org/proxies", "proxies": { "proxy1": { "matchCondition": {
"methods": ["GET"], "route": "/api/graphiql" }, "backendUri": "https:// graphqlvoting.blob.core.windows.net/static/index.html" } } }

@simona_cotin

@simona_cotin Photo by Charles Deluvio on Unsplash –Max Stoiber https://blog.apollographql.com/securing-your-graphql-api-from-
malicious-queries-16130a324a6b “With GraphQL you can query exactly what you want whenever you want. That is amazing for working with an API, but also has complex security implications.”

@simona_cotin Nested queries Photo by [2Ni] on Unsplash

@simona_cotin query { teams { name points } }

@simona_cotin query { teams { name points people { name
avatar friends { name shared_events { name location } } } ... } }

@simona_cotin query evil { teams { people { friends {
people { friends { people { friends ... } } } } } } }

@simona_cotin Limit the allowed depth

npm i graphql-depth-limit

@simona_cotin validationRules: [ depthLimit(10) ] { "errors": [ { "message":
"'evil' exceeds maximum operation depth of 10", "locations": [ { "line": 13, "column": 25 } ] } ] }

@simona_cotin query { teams (first:2) { name points } }

@simona_cotin query { teams (first:2000000) { name points } }

@simona_cotin Limit the allowed amount

@simona_cotin const MAX_ALLOWED = 100; if (first > MAX_ALLOWED) {
throw new Error(`${query} exceeds maximum operation amount of 100`); } { "errors": [ { "message": "'evil' exceeds maximum operation amount of 100", .. } ] }

@simona_cotin Query complexity

@simona_cotin GraphQL is serverless for your data

Autoscales Pay as you go Reacts to events ?

@simona_cotin Serverless ❤ GraphQL

@simona_cotin

@simona_cotin Azure Functions Azure Functions Proxies GraphQL Github GraphQL API
Awesome Graphql https://aka.ms/azure-functions https://aka.ms/az-proxies https://aka.ms/graphql https://aka.ms/gihub-api https://aka.ms/awesome-graphql

@simona_cotin Thank you!!!

Build Scalable APIs using GraphQL and Serverless

Build Scalable APIs using GraphQL and Serverless

More Decks by TechMasters

Other Decks in Programming

Featured

Transcript