AWS Community Day 2018 re:Invent 특집 원지혁 - AWSKRUG 대학생 모임

1. ♥
Amazon AppSync,
GraphQL as a Service
@jeehyukwon in #university
AUSG - AWSKRUG
jee@hyuk.io

2. Amazon AppSync, GraphQL as a Service
👋
Jee-Hyuk Won
Yonsei University
Computer Science Dept.
•
• Front-End Developer 😅
• JavaScript (Node.js)
• Vue.js
• Erion
• GraphQL (Apollo)
• AppSync

3. RESTful API
Amazon AppSync, GraphQL as a Service

4. Amazon AppSync, GraphQL as a Service
RESTful API 😄
GET /posts/:id

5. Amazon AppSync, GraphQL as a Service
RESTful API 😄
...

6. Amazon AppSync, GraphQL as a Service
RESTful API 😥
• ,
• GET /users/32 - User ... (1)
• GET /posts/… - User ... (N)

7. Amazon AppSync, GraphQL as a Service
RESTful API 😥
????????????

8. Amazon AppSync, GraphQL as a Service
RESTful API 😥
• :
...
• :
User ?

9. Amazon AppSync, GraphQL as a Service
RESTful API 😥
• :
...
• :

10. Amazon AppSync, GraphQL as a Service
RESTful API 😥
• :
.. ......
• :
...

11. Amazon AppSync, GraphQL as a Service
RESTful API 😥
...

12. Amazon AppSync, GraphQL as a Service
RESTful API 😥
RESTful

13. GraphQL
Amazon AppSync, GraphQL as a Service

14. Amazon AppSync, GraphQL as a Service
GraphQL 😍
GraphQL
✔ N+1
✔ Pagination !
Endpoint
CRUD
✔

15. Amazon AppSync, GraphQL as a Service
GraphQL ? 🤔
• Apollo
(AppSync Apollo )
• Facebook
• A query language for your API

16. Amazon AppSync, GraphQL as a Service
GraphQL - Schema (Definition, Query)
type Project {
id: Number
name: String
tagline: String
}
type query {
getProject(name: String): Project
}

17. Amazon AppSync, GraphQL as a Service
GraphQL - Query
query {
getProject(name: “GraphQL”) {
tagline
}
}

18. Amazon AppSync, GraphQL as a Service
GraphQL - Result
{
“getProject”: {
“tagline”: “A query language for APIs”
}
}

19. Amazon AppSync, GraphQL as a Service
GraphQL - Schema (Mutation)
...
type mutation {
createProject(name: String, tagline: String): Project
}

20. Amazon AppSync, GraphQL as a Service
GraphQL - Mutate
mutation {
createProject(
name: “AppSync”,
tagline: “GraphQL as a Service”
){
id
tagline
}
}

21. Amazon AppSync, GraphQL as a Service
GraphQL - Result
{
“createProject”: {
“id”: “EQ9S0-2039DKAP-1201S”,
“tagline”: “GraphQL as a Service”
}
}

22. Amazon AppSync, GraphQL as a Service
GraphQL

23. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver (Schema)
type Query {
getProject(name: String): Project
}
type Project {
id: Number
name: String
tagline: String
contributors: [User]
}
type User {
id: String
firstName: String
lastName: String
following: [User]
}

24. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver (Sample Query)
query {
getProject(name: “GraphQL”) {
tagline
contributors {
firstName
lastName
following {
lastName
}
}
}
}

25. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
query {
getProject(name: “GraphQL”) {
tagline
contributors {
firstName
lastName
following {
lastName
}
}
}
}
getProject
DB
Project
Resolver

26. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
query {
getProject(name: “GraphQL”) {
tagline
contributors {
firstName
lastName
following {
lastName
}
}
}
}
tagline
getProject
Resolver return
contributors

27. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
query {
getProject(name: “GraphQL”) {
tagline
contributors {
firstName
lastName
following {
lastName
}
}
}
}
firstName
contributors
Resolver return
lastName
following

28. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
query {
getProject(name: “GraphQL”) {
tagline
contributors {
firstName
lastName
following {
lastName
}
}
}
}
follows
Resolver return
lastName

29. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
getProject contributors
tagline
following
lastName
firstName
lastName

30. Amazon AppSync, GraphQL as a Service
GraphQL - Resolver
ontributors
following
lastName
firstName
lastName
• Type Resolver
• Resolver Resolver
• Resolver
• ‘Graph!’

31. AppSync
Amazon AppSync, GraphQL as a Service

32. Amazon AppSync, GraphQL as a Service
AppSync? 🧐
• AWS
Serverless GraphQL API
• 3 AWS
• DynamoDB
• ElasticSearch
• Lambda (Resolver)

33. Amazon AppSync, GraphQL as a Service
AppSync - Schema
• Schema
• DynamoDB
• ElasticSearch
• Lambda
•

34. Amazon AppSync, GraphQL as a Service
AppSync - Mapping Template
• DynamoDB ,
• Mapping Template

35. Amazon AppSync, GraphQL as a Service
Demo

36. Amazon AppSync, GraphQL as a Service
Thank You
Amazon AppSync,
GraphQL as a Service
@jeehyukwon in #university
AUSG - AWSKRUG
jee@hyuk.io