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.

Building Serverless GraphQL Backends

2,077 views

Published on

Building Serverless GraphQL Backends

Published in: Software
  • Be the first to comment

Building Serverless GraphQL Backends

  1. 1. Serverless GraphQL Backend Architecture @nikolasburk
  2. 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  3. 3. Agenda 1. GraphQL Introduction 2. Serverless Functions 3. Serverless GraphQL Backends 4. Demo @nikolasburk
  4. 4. GraphQL Introduction @nikolasburk
  5. 5. What’s GraphQL? • new API standard by Facebook • query language for APIs • declarative way of fetching & updating data @nikolasburk
  6. 6. Mary Mary’s posts: Learn GraphQL Today Why GraphQL is better than REST React & GraphQL - A declarative love story Relay vs Apollo - GraphQL clients Last three followers: John, Alice, Sarah Example: Blogging App
  7. 7. Example: Blogging App with REST /users/<id> /users/<id>/posts /users/<id>/followers 3 API endpoints
  8. 8. 1 Fetch user data /users/<id>/users/<id> /users/<id>/posts /users/<id>/followers { “user”: { “id”: “er3tg439frjw” “name”: “Mary”, “address”: { … }, “birthday”: “July 26, 1982” } } HTTP GET Mary Mary’s posts: Last three followers:
  9. 9. 2 /users/<id> /users/<id>/posts /users/<id>/followers Fetch posts HTTP GET { “posts”: [{ “id”: “ncwon3ce89hs” “title”: “Learn GraphQL today”, “content”: “Lorem ipsum … ”, “comments”: [ … ], }, { “id”: “dsifr3as0vds” “title”: “React & GraphQL - A declarative love story”, “content”: “Lorem ipsum … ”, “comments”: [ … ], }, { “id”: “die5odnvls1o” “title”: “Why GraphQL is better than REST”, “content”: “Lorem ipsum … ”, “comments”: [ … ], }, { “id”: “dovmdr3nvl8f” “title”: “Relay vs Apollo - GraphQL clients”, “content”: “Lorem ipsum … ”, “comments”: [ … ], }] } Mary Mary’s posts: Learn GraphQL Today Why GraphQL is better than REST React & GraphQL - A declarative love story Relay vs Apollo - GraphQL clients Last three followers:
  10. 10. /users/<id> /users/<id>/posts /users/<id>/followers HTTP GET { “followers”: [{ “id”: “leo83h2dojsu” “name”: “John”, “address”: { … }, “birthday”: “January 6, 1970” },{ “id”: “die5odnvls1o” “name”: “Alice”, “address”: { … }, “birthday”: “May 1, 1989” }{ “id”: “xsifr3as0vds” “name”: “Sarah”, “address”: { … }, “birthday”: “November 20, 1986” } … ] } Mary Mary’s posts: Learn GraphQL Today Why GraphQL is better than REST React & GraphQL - A declarative love story Relay vs Apollo - GraphQL clients Last three followers: John, Alice, Sarah Fetch followers3
  11. 11. 1 API endpoint Example: Blogging App with GraphQL
  12. 12. Mary’s posts: Last three followers: Fetch everything with a single request1 HTTP POST query { User(id: “er3tg439frjw”) { name posts { title } followers(last: 3) { name } } }
  13. 13. Mary’s posts: Last three followers: Mary Learn GraphQL Today Why GraphQL is better than REST React & GraphQL - A declarative love story Relay vs Apollo - GraphQL clients John, Alice, Sarah Fetch everything with a single request1 HTTP POST { “data”: { “User”: { “name”: “Mary”, “posts”: [ { title: “Learn GraphQL today” }, { title: “React & GraphQL - A declarative love story” } { title: “Why GraphQL is better than REST” } { title: “Relay vs Apollo - GraphQL Clients” } ], “followers”: [ { name: “John” }, { name: “Alice” }, { name: “Sarah” }, ] } } }
  14. 14. The GraphQL Schema @nikolasburk • strongly typed & written in Schema Definition Language (SDL) • defines API ( = contract for client-server communication) • root types: Query, Mutation, Subscription
  15. 15. @nikolasburk Another Example: Chat type Person { name: String! messages: [Message!]! } type Message { text: String! sentBy: Person }
  16. 16. @nikolasburk { Message(id: “1”) { text sentBy { name } } } type Query { Message(id: ID!): Message } Root Types: Query
  17. 17. @nikolasburk { Message(id: “1”) { text sentBy { name } } } type Query { Message(id: ID!): Message } Root Types: Query
  18. 18. @nikolasburk { allMessages { text sentBy { name } } } type Query { Message(id: ID!): Message allMessages: [Message!]! } Root Types: Query
  19. 19. @nikolasburk { allMessages { text sentBy { name } } } type Query { Message(id: ID!): Message allMessages: [Message!]! } Root Types: Query
  20. 20. @nikolasburk mutation { createMessage(text:“Hi”) { id } } type Mutation { createMessage(text: String!): Message } Root Types: Mutation
  21. 21. @nikolasburk mutation { createMessage(text:“Hi”) { id } } type Mutation { createMessage(text: String!): Message } Root Types: Mutation
  22. 22. @nikolasburk mutation { updateMessage( id: “1”, text: “Hi” ) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message } Root Types: Mutation
  23. 23. @nikolasburk mutation { updateMessage( id: “1”, text: “Hi” ) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message } Root Types: Mutation
  24. 24. @nikolasburk mutation { deleteMessage(id: “1”) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message deleteMessage(id: ID!): Message } Root Types: Mutation
  25. 25. @nikolasburk mutation { deleteMessage(id: “1”) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message deleteMessage(id: ID!): Message } Root Types: Mutation
  26. 26. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Full* Schema type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message deleteMessage(id: ID!): Message } type Person { name: String! messages: [Message!]! } type Message { text: String! sentBy: Person }
  27. 27. Serverless Functions Breaking the Monolith 💥 @nikolasburk
  28. 28. Monolithic Architectures @nikolasburk • simple team structure • less communication overhead • global type safety* • hard to test • deployment workflows • bad scalability 👎👍
  29. 29. Microservices @nikolasburk • solve many problems of the monolith • new challenges: • organize and orchestrate the interplay of services • separating stateful and stateless components • dependencies between microservices
  30. 30. Serverless Functions (FaaS) @nikolasburk • deploy individual functions, not servers • can be invoked via HTTP webhook • FaaS providers • AWS Lambda • Google Cloud Functions • …
  31. 31. Using the Graphcool Framework to build Serverless GraphQL Backends @nikolasburk
  32. 32. The Graphcool Framework • automatically generated CRUD GraphQL API based on data model • event-driven core to implement business logic • global type system determined by GraphQL schema @nikolasburk A new level of abstraction for backend development
  33. 33. Serverless Functions w/ Graphcool • Hooks - synchronous data validation & transformation • Subscriptions - triggering asynchronous events • Resolvers - custom GraphQL queries & mutations @nikolasburk
  34. 34. Typesafe Events Example (Subscription) Send Welcome Email to new Users @nikolasburk
  35. 35. Client Apps Function Runtime Event System Graphcool Framework ƛ
  36. 36. ƛ subscription { Person { node { name email } } } Client Apps welcomeEmail.js Function Runtime Event System Graphcool Framework
  37. 37. subscription { Person { node { name email } } } Client Apps ƛ welcomeEmail.js ⏱ Function Runtime Event System Graphcool Framework
  38. 38. Function Runtime subscription { Person { node { name email } } } Event System Client Apps ƛ welcomeEmail.js mutation { createPerson( name:“Nikolas” email: “nikolas@graph.cool” ) { id } } ⏱ Graphcool Framework
  39. 39. subscription { Person { node { name email } } } Client Apps ƛ welcomeEmail.js mutation { createPerson( name:“Nikolas” email: “nikolas@graph.cool” ) { id } } 💥 Function Runtime Event System Graphcool Framework
  40. 40. “data”: { “Message”: { “node”: { “name”: “Nikolas” “email”: “nikolas@graph.cool” } } } Client Apps mutation { createPerson( name:“Nikolas” email: “nikolas@graph.cool” ) { id } } subscription { Person { node { name email } } } welcomeEmail.js ƛ Function Runtime Event System Graphcool Framework
  41. 41. Demo 🔨 @nikolasburk
  42. 42. Big news coming up! Stay tuned… 😏 @nikolasburk
  43. 43. Thank you! 🙇 @nikolasburk

×