+ AppSync · © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved

© 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved.


3-H1-3-16

�� + AppSync��

Keisuke Tsukagoshi

Mobile Specialist SA, Amazon Web Services Japan



About Me

�� (Tsukagoshi Keisuke)Specialist Solution ArchitectMobile / Serverless / DevOpsBackground

Web��

��

AWS AppSync


Overview

c GE E R Q Aa A G

I G IG

S T Q LPR I We G


GraphQL��


GraphQL ?

• GraphQL��API +��!-.��TypeSystem�$+��!�(,��#�#%� "��

• GraphQL�� "��#�#��#��&)�'*�0/�� #�-.��


� GraphQL�>C�� -REST API MB�LO-

• REST API�MBH�4AHN�LO• API 0=�$�*)-#E@�76• API�5�<�@K��76• API �$�*)-#�8J�� -�

• �+��-#MBH��/?• P(."�ID��13� API�5��• ��'-#$,&-�2��!.%.��;G�F9Request / Response�:��


GraphQL��(� ��!��

• � ��"�,�#�#1��"�#��#��!#"��

• 0&�#�#��'+� �• API��"��%)�/�*1�$-��• API�,.��/�*1�'+� �


��GraphQL�� – GraphQL� �-

•P )

A• A )

B A C• A I B A P

)


��GraphQL�� – GraphQL� �-

•P )

A• A )

B A C• A I B A P

)


type Todo {

id: ID!name: Stringdescription: Stringstatus: TodoStatus

}

type Query {getTodos: [Todo]

}

enum TodoStatus { done pending

}

I II D

!


)


)


-

•P )

A• A )

B A C• A I B A P

)


)

{"id": "1","name": "Get Milk",“priority": "1"

},{

"id": “2","name": “Go to gym",“priority": “5"

},…


}

type Todo {id: ID!name: Stringdescription: Stringpriority: Intduedate: String

}

query {getTodos {

idnamepriority

}}

��

��

��!��


)� ��

!= Graph databaseNoSQL, Relational, HTTP, etc.

�� GraphQL/posts/postInfo/postJustTitle/postsByAuthor

/postNameStartsWithX/commentsOnPost


-

•P )

A• A )

B A C• A I B A P

)


) )�� &%

Mutation �� - �� "!��$#

mutation addPost( id:123title:”New post!”author:”Nadia”){idtitleauthor

}

data: [{id:123,title:”New Post!”author:”Nadia”

}]


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 {

__typenameversiontitlecontentauthorurl

}}


) )

Subscription NewPostSub {addedPost{…}

}

WebSocket URL and Connection Payload

Secure Websocket Connection (wss://)


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

)


Demo: ��


AppSync��


AWS AppSync��

�� GraphQL �� GraphQL��


6="�="

• 9�:%�2• LI�ED��('��&( 50=-

• �9�:%�2�+=%�KI

• �80;= 7<• TH6=�=�@CQV�S��/9�= 7<

• -�53<,�N?�*�",3(#=!��<*<)%�/�RBKI

• $= 4:3+��• $= 4:3+��'4(,

• TH6=�=U��3(#=!<�OM��1=,

• �.8�<J��/9�= 7<�G>��AFPJ�RB Sync


AppSync��(��

• AWS App Sync Client : 10��#�('��+��Client• Data Source : DynamoDB / Elasticsearch / Lambda• Identity : GraphQL Proxy ��$��10• GraphQL Proxy : $��!��(��(�$��(�$(�� (�')%

• Operation : Query / Mutation / Subscription �� GraphQL��&)�"(• Action : GraphQL� Subscriber ��3.• Resolver : $�� / &� (��*-�/2�4,


AppSync Overview

AWS AppSync

AmazonDynamoDB

AWSLambda

Elasticsearch

subscriptions

/graphql

Resolvers

DataSources


dynamoDB�AmazonES

AmazonDynamoDB

ElasticSearch

/addPost

/searchPosts

�� #��&��"��$��"��"�� !%�"�e.t.c


Lambda3rdPartyAPI

/searchPosts��api

Lambda�DataSource�� WebAPI��


��

!��"��#�

� ��


��

��

��

��


��

��

��

��


��

AWS AppSync

AmazonDynamoDB

AWSLambda

Elasticsearch

subscriptions

/graphql

Resolvers

DataSources


�� $)

• �� '*�+,��&#��"%��!(��

• GraphQL API �1�� GraphQL�� $)��SDL(Schema Definition Language)��+,��


��

schema {query:Querymutation: Mutationsubscription: Subscription

}

��

Query : �Mutation : � Subscription : ��


��!�


}

type Todo {id: ID!name: Stringdescription: Stringstatus: TodoStatus

}

enum TodoStatus { done pending

}

�� #�%

Not Null��$�&"ID!

��'��&"

[String!]


��"��

��

��

�� !�

Resolver Mapping Template��


AppSync Overview

AWS AppSync

AmazonDynamoDB

AWSLambda

Elasticsearch

subscriptions

/graphql

Resolvers

DataSources


�!�%��$��$�"%��2

• ��$��$�"%��GraphQL ��%��%��'&�(+�,-��%��%��*.GraphQL"��$��(+�,-)/�

• Apache Velocity Template Language0VTL1• �#��$� ��

• https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-reference-programming-guide.html

http://velocity.apache.org/engine/2.0/vtl-reference.html

https://docs.aws.amazon.com/appsync/latest/devguide/resolver-mapping-template-reference-programming-guide.html


)�* .%�!-��-#+.��/• ��-�,.*• :> ��&�"�*�0• 12 )�.�(-�"�.%��• �.�58�97• )��%�#36• '.�.ID4��+�$-�"�*�)-�/5;

• =@�<?��


��

• ��• ��


� : ��

{

"version" : "2017-02-28",

"operation" : "GetItem",

"key" : {

"id" : { "S" : "${context.arguments.id}" }

}

}


� : ��

$utils.toJson($context.result)

{

"id" : ${context.data.id},

"title" : "${context.data.theTitle}",

"content" : "${context.data.body1} ${context.data.body2}"

}

��

��


��


DynamoDB��


��

��

��

��


AppSync Overview

AWS AppSync

AmazonDynamoDB

AWSLambda

Elasticsearch

subscriptions

/graphql

Resolvers

DataSources


GraphQL Endpoint��export default {

"graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql","region": "us-east-1","authenticationType": "API_KEY","apiKey": ”***"

}


Cl ient�� 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/


Cl ient��//API Keyconst client = new AWSAppSyncClient({

url: awsconfig.ENDPOINT, region: awsconfig.REGION,auth: { type: AUTH_TYPE.API_KEY,

apiKey: awsconfig.apiKey}});


Cl ient��//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}


Demo: GraphQL��


��

• 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

https://github.com/aws-samples/aws-amplify-graphql

https://github.com/aws-samples/aws-mobile-appsync-events-starter-react


AWS AppSync GraphQL Photo Sample


��

•P )

A• A )

B A C• A I B A P

)


Happy coding with AppSync!

AWS AppSync

AmazonDynamoDB

AWSLambda

Elasticsearch

subscriptions

/graphql

Resolvers

DataSources

AWS AppSync �� GraphQL API ��



k a R Q Sb Q c

c F

3 b A Q S

Documents

+ AppSync · © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved. © 2018, Amazon Web Services, Inc. or its affiliates. All rights reserved