端端舝

? 2018, Amazon Web Services, Inc. or its Affiliates. All rights reserved.
GraphQL ⻌嬡 (AWS AppSync)
AWS CREATIVE STUDIO | 2018
Amazon Web Services Japan K.K.
Solution Architect, Strategic
Atsuya Nunomura

Who am I ?
票游 �珩ㄗ厄及戈日丐勾支ㄘ
Amazon Web Services Japan K.K.
Solution Architect, Strategic
Background
Web/Mobile 失皿伉弗奈扑亦件?API嶱逃,
Web Service嶱逃﹜Apollo疑五
疑五卅扔奈申旦
AppSync, ECS, Lambda

Overview
�〝卅戊立亙瓦氾奴匹☆GraphQL vs REST★午中丹倛匹畿賡今木
REST API及棒及由仿母奶丞午仄化蛁醴毛摩戶化中月GraphQL
踏゜反???
GraphQL及衙猁﹜失奈平氾弁民乓﹜REST午及掀廌﹜瞳蚚扑奈件卞
勾中化及云�午﹜AWS AppSync 毛瞳蚚允月岈匹��g卞
GraphQL毛妏中宎戶月岈互堤懂月午中丹云�

GraphQL 衙猁

GraphQL !?
奈 TL ; DR 奈
← API蚚及Query晟惤ㄗA query language for your APIㄘ
← TypeSystem毛妏蚚仄化Query毛灍俴允月鮋及扔奈田奈�仿件正奶丞
← 弁仿奶失件玄互扔奈田奈井日犯奈正毛龰腕﹜劐載﹜�掂

腎�及掖劓
Web (HTML)
RDB
RESTful API
RDB
No
SQL
GraphQL
RDB
No
SQL
API

卅兮腎�仄凶ㄐˋ
← REST API嶱逃氪﹜瞳蚚氪及掝觳
?API帊�及玉平亙丟件玄奪燴互湮劐
?API及萰五源毛燴賤允月及互湮劐
?API及玉平亙丟件玄午灍蚾互朮伊化弗件市
← 弁仿奶失件玄嶱逃氪井日及祥㦤
?ㄠ矢奈斥桶尨允月及卞𢜔勾手API毛萰井卅中午中仃卅中
?殏褒奶矛件玄玉伉皮件卞釬勻化手扔奈田奈午及諉適反磐擁
Request / Response及倛互紹月
(T_T)

GraphQL卞方勻化腕日木月丟伉永玄
弁仿奶失件玄/扔奈田奈嶲及奶件正白尼奈旦互
弁伉奈件卞卅月
籵陓左奈田奈目永玉互祅𦑩今木月
API玉平亙丟件玄釬傖卞愐支允媆嶲互祥猁卞卅月
API毛燴賤允月及卞愐支允媆嶲互祅𦑩今木月
(^ ^)

卅兮GraphQL互蛁醴今木化中月井ˋ - GraphQL及杻釾 -
ㄠㄝ倰硌隅今木凶旦平奈穴
ㄡㄝ弁仿奶失件玄井日及伊旦禾件旦倛宒及硌隅
ㄢㄝ扔皮旦弁伉皿扑亦件毛瞳蚚仄凶伉失伙正奶丞�I燴

API玉平亙丟件玄毛翋爀匹�扴允月斛猁互剠仁卅曰﹜
API毛隅膽仄凶旦平奈穴毛矛奈旦卞赻�汜傖

旦平奈穴隅膽
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
priority: Int
duedate: String
}
旦市仿奈倰﹜左皮斥尼弁玄倰﹜
蹈伃倰卅升毛瞳蚚褫夔
Not Null反覜䏰睫匹桶政
ID!
伉旦玄反褒市永戊匹桶政
[String!]

玉平亙丟件玄赻�汜傖

Query灍俴虐噫

?左奈田奈白尼永民﹜失件母奈白尼永民互剠仁卅月
?弁伉奈件卅奶件正白尼奈旦

弁仿奶失件玄互伊旦禾件旦倛宒毛硌隅
{
"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
}
}
失皿伉及旦平奈穴午
乒犯伙犯奈正
弁仿奶失件玄互斛猁卅
手及分仃毛伉弁巨旦玄
伉弁巨旦玄仄凶犯奈正
分仃互殿今木月

弁伉奈件卅奶件正白尼奈旦
左奈皿件匹哫晟腔卅犯奈正龰腕及帊�
𣶹懂及犯奈正白尼永民 GraphQL
/posts
/postInfo
/postJustTitle
/postsByAuthor
/postNameStartsWithX
/commentsOnPost

弁仿奶失件玄反犯奈正毛扔皮旦弁仿奶皮允月岈匹
奶矛件玄?玉伉皮件卞�I燴毛灍蚾褫夔

GraphQL及�I燴倛颷
Queryㄗ龰腕ㄘ Subscriptionㄗ�掂ㄘ
Mutationㄗ劐載ㄘ
Mutation
Subscription
※Event !!§
仇仇及云�

GraphQL Subscription
幻廿伉失伙正奶丞匹及犯奈正�掂
Mutation毛玄伉布奈午仄凶奶矛件玄矛奈旦乒奈玉
mutation addPost( id:123
title: "New post!"
author: "Nadia"){
id
title
author
}
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 {
__typename
version
title
content
author
url
}
}

GraphQL Subscription 甩件玉扑尼奶弁
Subscription NewPostSub {
addedPost{＃}
}
WebSocket URL and Connection Payload
Secure Websocket Connection (wss://)

AWS AppSync

AWS AppSync午反ㄐˋ
白伙穴生奈斥玉 GraphQL 扔奈申旦
允什卞 GraphQL 及瞳蚚毛宎戶日木引允

Developer及掝觳賤𢜪
伉失伙正奶丞戊
仿示伊奈扑亦件
肮ヽ毛蕉𩬅仄
凶左白仿奶件皿
伕弘仿立件弘
斛猁卅犯奈正
及心及龰腕
恚杅及犯奈正
末奈旦尺及
失弁本旦
失弁本旦秶郘

Usecase
← 伉失伙正奶丞
?郔陔及ロ�毛它巧永民允月母永扑亙示奈玉
?幻廿伉失伙正奶丞匹犯奈正毛載陔
← 戊仿示伊奈扑亦件
?恚杅交奈扒奈互僕肮�摩毛俴丹失皿伉弗奈扑亦件
?玉平亙丟件玄﹜賒砉﹜氾平旦玄丟永本奈斥脹﹜�〝卅
戊件氾件汁正奶皿毛赻�載陔
← 末奈扑乓伙丟犯奴失
?末奈扑乓伙丟犯奴失支民乓永玄
?恚杅交奈扒奈嶲匹及丟永本奈斥件弘奪燴毛扔禾奈玄
?左白仿奶件媆匹手失皿伉弗奈扑亦件毛紱釬匹五﹜
婬諉適媆卞赻� Sync

AppSync及戊件本皿玄
? AWS App Sync Client : 庲偩﹜左白仿奶件伕斥永弁卅升毛漪氏分Client
? Data Source : DynamoDB / Elasticsearch / Lambda / HTTP Endpoint
? Identity : GraphQL Proxy 尺及伉弁巨旦玄及庲偩
? GraphQL Proxy : 伉弁巨旦玄及穴永疋件弘﹜戊件白伉弁玄及甩件玉伉件弘﹜
失弁本旦戊件玄伕奈伙
? Operation : Query / Mutation / Subscription 卅升 GraphQL 及左矢伊奈扑亦件
? Action : GraphQL 井日 Subscriber 尺及籵眭
? Resolver : 伉弁巨旦玄 / 伊旦禾件旦及�I燴毛�扴允月憝杅

AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch
subscriptions
/graphql
Resolvers
DataSources
HTTP Endpoinmt

DynamoDB午AmazonES
Amazon
DynamoDB
ElasticSearch
/addPost
/searchPosts
犯奈正末奈旦毛瞎心磁歹六月仇午匹詢僅卅𨈘坰卞手�𡛟褫夔﹝
平奈伐奈玉𨈘坰﹜白央斥奈𨈘坰﹜華燴諾嶲𨈘坰＃

Lambda, HTTP Endpoint午3rd Party API
/searchPosts
Lambda毛DataSource午仄化㜳尹月凶戶﹜卅氏匹手匹五月
俋窒及WebAPI毛萰仁仇午手褫夔

旦弗奈仿申伉氾奴
AppSync田永弁弘仿它件玉及
ResolverㄛDataSource及瞎磁六反赻蚕
嶱逃卞云仃月��俶互準都卞詢仁
捃厒卅皿伕玄正奶疋件弘互褫夔

捃厒卅皿伕玄正奶疋件弘
旦平奈穴
隅膽
DataSource
午及諉適
弁仿奶失件玄
及偞隅

旦平奈穴隅膽
← 旦平奈穴反扔奈田及辻夔毛�扴仄﹜弁巨伉互衄�井升丹井毛瓚
剿允月鮋卞妏蚚今木引允﹝
← GraphQL API 反1勾及 GraphQL 旦平奈穴匹隅膽今木﹜
SDL(Schema Definition Language)卞方勻化�扴今月﹝

旦平奈穴及𤩸五源
schema {
query:Query
mutation: Mutation
subscription: Subscription
}
伙奈玄旦平奈穴毛隅膽
Subscriptionㄗ�掂ㄘ
Mutationㄗ載陔ㄘ
Queryㄗ龰腕ㄘ

正奶皿及𤩸五源
type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
enum TodoStatus {
done
pending
}
旦市仿奈倰﹜左皮斥尼弁玄倰﹜
蹈伃倰卅升毛瞳蚚褫夔
Not Null反覜䏰睫匹桶政
ID!
伉旦玄反褒市永戊匹桶政
[String!]

伉札伙田奈穴永疋件弘氾件皿伊奈玄午反ㄐˋ
? 穴永疋件弘氾件皿伊奈玄反﹜GraphQL伉弁巨旦玄毛犯奈正末奈旦及
韜鍔卞劐𡥼允月源楊午﹜犯奈正末奈旦井日及𡛟湘毛GraphQL伊旦禾
件旦卞劐𡥼允月源楊毛隅膽允月
? Apache Velocity Template LanguageㄗVTLㄘ
? 皿伕弘仿立件弘布奶玉
https://docs.aws.amazon.com/appsync/latest/devguide/resolver-
mapping-template-reference-programming-guide.html

伉札伙田奈穴永疋件弘氾件皿伊奈玄匹灍囥允月瞰
? 失弁本旦戊件玄伕奈伙
? 陔�失奶氾丞及犯白巧伙玄�
? ⻌薯及田伉犯奈扑亦件﹜白巧奈穴永玄
? 犯奈正及劐𡥼午淕倛
? 伉旦玄﹜穴永皿及樓馱
? 交奈扒奈ID卞價勿中凶伊旦禾件旦及白奴伙正伉件弘/劐載
? 恚螝卅痜癹民尼永弁

ㄡ意�及穴永疋件弘氾件皿伊奈玄
? 伉弁巨旦玄氾件皿伊奈玄ㄗRequest ? DataSource韜鍔ㄘ
? 伊旦禾件旦氾件皿伊奈玄ㄗDataSource𡛟湘 ? GraphQL Responseㄘ

伉弁巨旦玄穴永疋件弘氾件皿伊奈玄ㄗ瞰ㄘ
{
"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}"
}

VTL毛眻諉�扴ㄗ赻�娗俇ㄘ

No-code GraphQL API Builder毛瞳蚚
?旦平奈穴囀及隅膽𦤦心及Type井日
DynamoDB 氾奈皮伙毛皿伕申斥亦瓦件弘
?伉札伙田毛瞳蚚仄化白奴伙正﹜𨈘坰﹜
掀廌卅升毛��g卞瞎心煋心

旦平奈穴井日斥尼生伊奈玄

DynamoDB井日斥尼生伊奈玄

GraphQL Endpoint尺及諉適ロ�
export default {
"graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql",
"region": "us-east-1",
"authenticationType": §API_KEY",
"apiKey": §***"
}

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/

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

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
}

鴛戶

API玉平亙丟件玄毛翋爀匹�扴允月斛猁互剠仁卅曰﹜
API毛隅膽仄凶旦平奈穴毛矛奈旦卞赻�汜傖
?左奈田奈白尼永民﹜失件母奈白尼永民互剠仁卅月
?弁伉奈件卅奶件正白尼奈旦
弁仿奶失件玄反犯奈正毛扔皮旦弁仿奶皮允月岈匹奶矛件玄?
玉伉皮件卞�I燴毛灍蚾褫夔
鴛戶

Happy coding with AppSync

端端舝

GraphQL⻌嬡 (AWS AppSync)

Recommended

More Related Content

What's hot (20)

Similar to GraphQL⻌嬡 (AWS AppSync) (20)

More from Amazon Web Services Japan (20)

Recently uploaded (6)

GraphQL⻌嬡 (AWS AppSync)