JJUG CCC 2018 Spring #jjug #jjug_ccc #ccc_e6

1. Amazon Web Services Japan
Tsukagoshi Keisuke
REST API
GraphQL
JJUG CCC 2018 Spring #ccc_e6

2. Who am I ?
e gd B A @
Mobile / DevOps / Serverless
W
SJ ba
W
J
c S=

3. Overview
c G
E E R Q Aa A G
I G I
G
S T Q LPR I We G

4. GraphQL

5. GraphQL ?
• GraphQL API TypeSystem
• GraphQL

6. GraphQL -REST API -
• REST API
• API
• API
• API
•
• API
•
Request / Response

7. GraphQL
• ,
•
• API
• API

8. GraphQL – GraphQL -
•
P )
A
• A )
B A C
• A I B A P
)

9. GraphQL – GraphQL -
•
P )
A
• A )
B A C
• A I B A P
)

10. !
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
type Query {
getTodos: [Todo]
}
enum TodoStatus {
done
pending
}
A
N I
S
D
)

11. )

12. )

13. ) )
PL
• La G p - G
PL G P hp r
I C P P
• I C P P G
B -
P G QI
• I A QG P I -I
G

14. )
{
"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
}
}

15. )
!= Graph database
NoSQL, Relational, HTTP, etc.
GraphQL
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsWithX
/commentsOnPost

16. ) )
PL
• La G p - G
PL G P hp r
I C P P
• I C P P G
B -
P G QI
• I A QG P I -I
G

17. )
Mutation
-
mutation addPost( id:123
title:”New post!”
author:”Nadia”){
id
title
author
}
data: [{
id:123,
title:”New Post!”
author:”Nadia”
}]

18. 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!
}
subscription NewPostSub {
addedPost {
__typename
version
title
content
author
url
}
}

19. ) )
Subscription NewPostSub {
addedPost{…}
}
WebSocket URL and Connection Payload
Secure Websocket Connection (wss://)

20. const AllPostsWithData = compose(
graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ },
props: (props) => ({
posts: props.data.posts,
subscribeToNewPosts: params => {
props.data.subscribeToMore({
document: NewPostsSubscription,
updateQuery: (prev, { subscriptionData: { newPost } }) => ({
...prev,
posts: [newPost, ...prev.posts.filter(post => post.id !== newPost.id)]
})
});
});
…//more code
)

21. Demo:

22. AppSync

23. AWS AppSync
GraphQL
GraphQL

24. •
•
•
•
•
•
•
•
•
•
Sync

25. AppSync
•
•
•
•
•
•
•

26. AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

27. dynamoDB AmazonES
Amazon
DynamoDB
ElasticSearch
e.t.c

28. Lambda 3rdPartyAPI
Lambda DataSource
WebAPI

32. AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

33. •
• GraphQL API 1 GraphQL
SDL(Schema Definition Language)

34. schema {
query:Query
mutation: Mutation
subscription: Subscription
}
Query :
Mutation :
Subscription :

35. type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
enum TodoStatus {
done
pending
}
Not Null
ID!
[String!]

36. Resolver Mapping Template

37. AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

38. • GraphQL
GraphQL
• Apache Velocity Template Language VTL
•
• https://docs.aws.amazon.com/appsync/latest/devguide/resolver-
mapping-template-reference-programming-guide.html

39. •
•
•
•
•
• ID /
•

40. •
•

41. :
{
"version" : "2017-02-28",
"operation" : "GetItem",
"key" : {
"id" : { "S" : "${context.arguments.id}" }
}
}

42. :
$utils.toJson($context.result)
{
"id" : ${context.data.id},
"title" : "${context.data.theTitle}",
"content" : "${context.data.body1} ${context.data.body2}"
}

44. DynamoDB

46. AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

47. GraphQL Endpoint
export default {
"graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql",
"region": "us-east-1",
"authenticationType": "API_KEY",
"apiKey": ”***"
}

48. Client
const client = new AWSAppSyncClient({
url: awsconfig.ENDPOINT,
region: AWS.config.region,
auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() }
});
const WithProvider = () => (
<ApolloProvider client={client}>
<Rehydrated>
<AppWithData />
</Rehydrated>
</ApolloProvider>
);
https://aws.github.io/aws-amplify/

49. Client
//API Key
const client = new AWSAppSyncClient({
url: awsconfig.ENDPOINT,
region: awsconfig.REGION,
auth: { type: AUTH_TYPE.API_KEY,
apiKey: awsconfig.apiKey}
});

50. Client
//IAM
auth: { type: AUTH_TYPE.AWS_IAM,
credentials: Auth.currentCredentials()
}
//Cognito User Pool
auth: { type: AUTH_TYPE.AMAZON_COGNITO_USER_POOLS,
jwtToken: Auth.currentSession().accessToke.jwtToken
}

51. Demo: GraphQL

52. • AWS AppSync GraphQL Photo Sample
• https://github.com/aws-samples/aws-amplify-graphql
• GraphQL starter application
• https://github.com/aws-samples/aws-mobile-appsync-
events-starter-react

53. AWS AppSync GraphQL Photo Sample

54. B
• B
B )
C
• C )
A I I
P C
• C P C P
P )

55. Happy coding with AppSync!
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch
AWS AppSync
GraphQL API