Ce diaporama a bien été signalé.
Le téléchargement de votre SlideShare est en cours. ×

The Serverless GraphQL Backend Architecture

Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Publicité
Chargement dans…3
×

Consultez-les par la suite

1 sur 58 Publicité
Publicité

Plus De Contenu Connexe

Diaporamas pour vous (20)

Similaire à The Serverless GraphQL Backend Architecture (20)

Publicité

Plus récents (20)

Publicité

The Serverless GraphQL Backend Architecture

  1. 1. The Serverless GraphQL Backend Architecture @nikolasburk
  2. 2. Nikolas Burk 👋 Developer at Graphcool $ whoami @nikolasburk
  3. 3. Agenda 1. GraphQL Introduction 2. GraphQL Core Concepts 3. Serverless GraphQL Backend Architecture
  4. 4. GraphQL Introduction
  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. GraphQL Core Concepts 1. Queries 2. Mutations 3. GraphQL Schema 4. Resolver Functions
  15. 15. @nikolasburk Another Example: Chat type Person { name: String! messages: [Message!]! } type Message { text: String! sentBy: Person }
  16. 16. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk
  17. 17. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } @nikolasburk Operation Type
  18. 18. Queries … only read data @nikolasburk Operation Name query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  19. 19. Queries … only read data @nikolasburk Fields query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  20. 20. Queries … only read data @nikolasburk Root Field query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  21. 21. Queries … only read data @nikolasburk Payload query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  22. 22. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  23. 23. Queries … only read data query MessageQuery { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk
  24. 24. Queries … only read data { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } } @nikolasburk query MessageQuery { Message(id: “1”) { text sentBy { name } } }
  25. 25. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  26. 26. Mutations … write and read data mutation CreateMessageMutation { createMessage(text:“Greetings 👋”) { id } } { “data”: { “createMessage”: { “id”: “3”, } } } @nikolasburk
  27. 27. The GraphQL Schema @nikolasburk • written in Schema Definition Language (SDL) • defines API capabilities ( = contract for client-server communication) • root types: Query, Mutation, Subscription
  28. 28. @nikolasburk { Message(id: “1”) { text sentBy { name } } } type Query { Message(id: ID!): Message } Root Types: Query
  29. 29. @nikolasburk { Message(id: “1”) { text sentBy { name } } } type Query { Message(id: ID!): Message } Root Types: Query
  30. 30. @nikolasburk { allMessages { text sentBy { name } } } type Query { Message(id: ID!): Message allMessages: [Message!]! } Root Types: Query
  31. 31. @nikolasburk { allMessages { text sentBy { name } } } type Query { Message(id: ID!): Message allMessages: [Message!]! } Root Types: Query
  32. 32. @nikolasburk mutation { createMessage(text:“Hi”) { id } } type Mutation { createMessage(text: String!): Message } Root Types: Mutation
  33. 33. @nikolasburk mutation { createMessage(text:“Hi”) { id } } type Mutation { createMessage(text: String!): Message } Root Types: Mutation
  34. 34. @nikolasburk mutation { updateMessage( id: “1”, text: “Hi” ) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message } Root Types: Mutation
  35. 35. @nikolasburk mutation { updateMessage( id: “1”, text: “Hi” ) { id } } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message } Root Types: Mutation
  36. 36. @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
  37. 37. @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
  38. 38. @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 }
  39. 39. Let’s play …with GraphQL Playgrounds ▷
  40. 40. Resolver Functions @nikolasburk • each field in the schema is backed by a resolver • the type of a resolver is identical to the type of the field (including arguments) • a query is resolved by calling the resolvers for its fields
  41. 41. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 }
  42. 42. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 }
  43. 43. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: }
  44. 44. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { } } }
  45. 45. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎” } } }
  46. 46. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { } } } }
  47. 47. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } }
  48. 48. @nikolasburk type Query { Message(id: ID!): Message allMessages: [Message!]! } Resolver Functions 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 } { Message(id: “1”) { text sentBy { name } } } { “data”: { “Message”: { “text”: “Hello 😎”, “sentBy”: { “name”: “Sarah” } } } }
  49. 49. The Serverless GraphQL Backend Architecture
  50. 50. A New Abstraction for Backend Development • automatically generated CRUD GraphQL API based on data model • event-driven core to implement business logic • global type system determined by GraphQL schema @nikolasburk
  51. 51. CRUD GraphQL API @nikolasburk type Message { text: String! sentBy: Person } type Query { Message(id: ID!): Message allMessages: [Message!]! } type Mutation { createMessage(text: String!): Message updateMessage(id: ID!, text: String!): Message deleteMessage(id: ID!): Message }
  52. 52. Event-driven Business Logic • synchronous events for data validation & transformation • asynchronous events for application logic • all implemented with serverless functions @nikolasburk
  53. 53. Global Type System • all data flowing through the system is typed • types are defined in the GraphQL schema • ideally using a typed language @nikolasburk
  54. 54. Graphcool The Serverless GraphQL Backend @nikolasburk
  55. 55. Graphcool & Serverless Functions • Request Pipeline - synchronous data validation & transformation • Server-side Subscriptions - triggering asynchronous events • Schema Extensions - custom GraphQL queries & mutations @nikolasburk
  56. 56. Resources 📚 • How to GraphQL - The Fullstack Tutorial for GraphQL • GraphQL Weekly Newsletter • GraphQL Radio Podcast
  57. 57. We’re hiring! www.graph.cool/jobs
  58. 58. Thank you! 🙇 … any questions?

×