Building Real-time Serverless Backends with GraphQL

AWS SummitBenelux, The Hague, May 31st, 2018

GraphQL is an open standard that lets you request, change, and subscribe to the exact data you need in a single network request. This makes prototyping and building data-intensive applications as simple as writing a few lines of code. In this session we’ll introduce the core concepts of GraphQL and put that into practice with real-world implementations using tools such as AWS Lambda and AWS AppSync to deliver real-time collaborative experiences for web and mobile apps, using multiple data sources, managing off-line users’ data, and resolving data conflicts.

Transcript

1. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   Danilo Poccia
   Evangelist, Serverless, Amazon Web Services
   @danilop
   Building Real-Time
   Serverless Backends with GraphQL
   

   View Slide

2. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
   Data-Driven App Challenges
   Data requirements
   vary across devices
   and become harder
   when multiple
   users share data
   Users want instant
   access to data
   Building scalable
   data-driven apps
   without learning
   distributed systems
   concepts is hard
   Users want to
   continue using
   their apps, even
   with low or no
   connectivity
   

   View Slide

3. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
   Why not just continue using REST for my UI?
   1. Chattiness
   2. TMI
   3. Tooling
   4. Real time
   5. Offline
   

   View Slide

4. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   What is GraphQL?
   GraphQL is a query language for APIs and a runtime for fulfilling
   those queries with your existing data
   Traditional data-fetching GraphQL
   /posts
   /postInfo
   /postJustTitle
   /postsByAuthor
   /postNameStartsWithX
   /commentsOnPost
   

   View Slide

5. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   How does GraphQL work?
   {
   "id": "1",
   "name": "Get Milk",
   "priority": "1"
   },
   {
   "id": "2",
   "name": "Go to gym",
   "priority": "5"
   },…
   type Query {
   getTodos: [Todo]
   }
   type Todo {
   id: ID!
   name: String
   description: String
   priority: Int
   duedate: String
   }
   query {
   getTodos {
   id
   name
   priority
   }
   }
   Model data with
   application schema
   Client requests what it
   needs
   Only that data is
   returned
   

   View Slide

6. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.
   Is REST dead then?
   • When data drives UI
   • Structured data
   • Query-driven
   • Client-driven development
   Use GraphQL
   • When you leverage HTTP
   • Caching
   • Content types
   • Hypermedia (HATEOAS)
   • For resources (e.g., Amazon S3)
   Use REST
   Pick the appropriate protocol for your use case
   

   View Slide

7. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   GraphQL
   Schema
   type Event {
   id: ID!
   name: String
   where: String
   when: String
   description: String
   comments: [Comment]
   }
   type Comment {
   commentId: String!
   eventId: ID!
   content: String!
   createdAt: String!
   }
   

   View Slide

8. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   GraphQL
   Schema
   Mutation
   type Mutation {
   createEvent(
   name: String!,
   when: String!,
   where: String!,
   description: String!
   ): Event
   deleteEvent(id: ID!): Event
   commentOnEvent(
   eventId: ID!,
   content: String!,
   createdAt: String!
   ): Comment
   }
   

   View Slide

9. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
   GraphQL
   Schema
   Mutation
   Query
   type Query {
   getEvent(id: ID!): Event
   listEvents(
   limit: Int,
   nextToken: String
   ): EventConnection
   }
   

   View Slide

10. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    GraphQL
    Schema
    Mutation
    Query
    Subscription
    type Subscription {
    subscribeToEventComments(eventId: String!): Comment
    @aws_subscribe(mutations: ["commentOnEvent"])
    }
    

    View Slide

11. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    GraphQL
    Schema
    Mutation
    Query
    Subscription
    Realtime? YES
    Batching? YES
    Pagination? YES
    Relations? YES
    Aggregations? YES
    Search? YES
    Offline? YES
    

    View Slide

12. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    Introducing AWS AppSync
    AWS AppSync is a managed service for application data using
    GraphQL with real-time capabilities and an offline
    programming model
    Real-time
    collaboration
    Offline programming
    model with sync
    Flexible database
    options
    Fine-grained
    access control
    

    View Slide

13. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    AWS AppSync
    DynamoDB
    Table
    Lambda
    Function Elasticsearch
    Service
    GraphQL
    Schema
    Upload
    Schema
    GraphQL
    Query
    Mutation
    Subscription
    Real-time
    Offline
    AppSync
    API
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    Auth
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    OpenID
    Connect
    

    View Slide

14. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    AWS AppSync
    DynamoDB
    Table
    Lambda
    Function Elasticsearch
    Service
    GraphQL
    Schema
    Create
    DynamoDB
    Table
    GraphQL
    Query
    Mutation
    Subscription
    Real-time
    Offline
    AppSync
    API
    Upload
    Schema
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    OpenID
    Connect
    Auth
    C
    reate
    R
    esource
    

    View Slide

15. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    AWS AppSync
    DynamoDB
    Table
    Lambda
    Function Elasticsearch
    Service
    GraphQL
    Schema
    Autogenerate
    Schema
    GraphQL
    Query
    Mutation
    Subscription
    Real-time
    Offline
    AppSync
    API
    Upload
    Schema
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    OpenID
    Connect
    Auth
    Im
    port a
    D
    ynam
    oD
    B
    Table
    

    View Slide

16. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    AWS AppSync
    DynamoDB
    Table
    Lambda
    Function Elasticsearch
    Service
    GraphQL
    Schema
    Upload
    Schema
    Real-time
    Offline
    AppSync
    API
    Legacy
    Application
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    OpenID
    Connect
    Auth
    GraphQL
    Query
    Mutation
    Subscription
    Legacy
    A
    pplications
    

    View Slide

17. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    AWS AppSync
    DynamoDB
    Table
    Lambda
    Function Elasticsearch
    Service
    GraphQL
    Schema
    Upload
    Schema
    Real-time
    Offline
    DynamoDB to Elasticsearch
    Sync Function
    AppSync
    API
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    OpenID
    Connect
    Auth
    GraphQL
    Query
    Mutation
    Subscription
    C
    om
    plex
    Q
    ueries
    

    View Slide

18. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    Images and Rich Content
    type S3Object {
    bucket: String!
    key: String!
    region: String!
    }
    input S3ObjectInput {
    bucket: String!
    key: String!
    region: String!
    localUri: String!
    }
    type Profile {
    name: String!
    profilePic: S3Object!
    }
    type Mutation {
    updatePhoto(name: String!,
    profilePicInput: S3ObjectInput!): Profile
    }
    

    View Slide

19. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    GraphQL Subscriptions
    Near Realtime updates of data
    Event based mode, triggered by Mutations
    • Scalable model, designed as a platform for common use-cases
    Can be used with ANY data source in AppSync
    • Lambda, DynamoDB, Elasticsearch
    mutation addPost( id:123
    title:"New post!"
    author:"Nadia"){
    id
    title
    author
    }
    data: [{
    id:123,
    title:"New Post!"
    author:"Nadia"
    }]
    

    View Slide

20. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    Schema Directives
    subscription NewPostSub {
    addedPost {
    __typename
    version
    title
    content
    author
    url
    }
    }
    type Subscription {
    addedPost: Post
    @aws_subscribe(mutations: ["addPost"])
    deletedPost: Post
    @aws_subscribe(mutations: ["deletePost"])
    }
    type Mutation {
    addPost(id: ID! author: String! title:
    String content: String): Post!
    deletePost(id: ID!): Post!
    }
    

    View Slide

21. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    Demo
    

    View Slide

22. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved.
    Danilo Poccia
    Evangelist, Serverless, Amazon Web Services
    @danilop
    Thank you!
    

    View Slide