$30 off During Our Annual Pro Sale. View Details »

Building Real-time Serverless Backends with GraphQL

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.

Danilo Poccia

May 31, 2018
Tweet

More Decks by Danilo Poccia

Other Decks in Programming

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