Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Real-Time Serverless Backends with GraphQL

Real-Time Serverless Backends with GraphQL

AWS User Group Meeting, Cambridge, July 10th, 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

July 10, 2018
Tweet

More Decks by Danilo Poccia

Other Decks in Programming

Transcript

  1. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Real-Time Serverless
    Back Ends with GraphQL
    Danilo Poccia
    Technical Evangelist
    [email protected]
    @danilop
    danilop

    View full-size 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 full-size slide

  3. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    W hy not just continue using REST for m y U I?
    1. Chattiness
    2. TMI
    3. Tooling
    4. Real time
    5. Offline

    View full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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 full-size 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
    Create
    Resource

    View full-size 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 full-size 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
    Other
    Databases
    Cognito
    User Pool
    AWS
    IAM
    API
    Key
    Data Sources
    Resolvers
    Velocity Templates (VTL)
    OpenID
    Connect
    Auth
    GraphQL
    Query
    Mutation
    Subscription
    O
    ther
    D
    atabases

    View full-size 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
    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 full-size slide

  18. © 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
    Com
    plex
    Q
    ueries

    View full-size slide

  19. © 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 full-size slide

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

    View full-size slide

  21. © 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 full-size slide

  22. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    M
    usixm
    atch
    A
    W
    S
    Sum
    m
    it
    M
    ilan
    2018

    View full-size slide

  23. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    GraphQL Demo

    View full-size slide

  24. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    What are you going to build?

    View full-size slide

  25. © 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
    Real-Time Serverless
    Back Ends with GraphQL
    Danilo Poccia
    Technical Evangelist
    [email protected]
    @danilop
    danilop

    View full-size slide