Successfully reported this slideshow.
Your SlideShare is downloading. ×

Building Serverless GraphQL Backends

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad

Check these out next

6 of 43 Ad
Advertisement

More Related Content

Similar to Building Serverless GraphQL Backends (20)

Advertisement
Advertisement

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

×