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
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
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
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
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
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
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! }
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 }
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 }
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"]) }
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
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
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
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
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
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
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
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 }
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" }]
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! }
21. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Demo
22. © 2018, Amazon Web Services, Inc. or Its Affiliates. All rights reserved. Danilo Poccia Evangelist, Serverless, Amazon Web Services @danilop Thank you!