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

29.
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

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

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

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

33.
Resolver Mapping Template

34.
AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

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

36.
•
•
•
•
•
• ID /
•

37.
•
•

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

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

40.
DynamoDB

41.
AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

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

43.
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/

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

45.
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
}

46.
Demo: GraphQL

47.
• 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

48.
AWS AppSync GraphQL Photo Sample

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

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