REST API に疲れたあなたへ贈る GraphQL 入門

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

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

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

GraphQL

GraphQL ?
• GraphQL API TypeSystem
• GraphQL

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

GraphQL
• ,
•
• API
• API

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: String
description: String
status: TodoStatus
}
type Query {
getTodos: [Todo]
}
enum TodoStatu...

) )
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

)
{
"id": "1",
"name": "Get Milk",
“priority": "1"
},
{
"id": “2",
"name": “Go to gym",
“priority": “5"
},…
type Query {
g...

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

) )
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

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

$type Subscription { addedPost: Post @aws_subscribe(mutations: ["addPost"]) deletedPost: Post @aws_subscribe(mutations: ["d...$

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

const AllPostsWithData = compose(
graphql(AllPostsQuery, { options: { fetchPolicy: 'cache-and-network‘ },
props: (props) =...

Demo:

AppSync

AWS AppSync
GraphQL
GraphQL

•
•
•
•
•
•
•
•
•
•
Sync

AppSync
•
•
•
•
•
•
•

AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

dynamoDB AmazonES
Amazon
DynamoDB
ElasticSearch
e.t.c

Lambda 3rdPartyAPI
Lambda DataSource
WebAPI

AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

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

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

type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
enum TodoStatus ...

Resolver Mapping Template

AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

• GraphQL
GraphQL
• Apache Velocity Template Language VTL
•
• https://docs.aws.amazon.com/appsync/latest/devguide/resolver...

•
•
•
•
•
• ID /
•

•
•

:
{
"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...

DynamoDB

AppSync Overview
AWS AppSync
Amazon
DynamoDB
AWS
Lambda
ElasticSearch

GraphQL Endpoint
export default {
"graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql",
"region": "us-east...

$Client const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: AWS.config.region, auth: { type: AUTH_TYPE.A...$

Client
//API Key
const client = new AWSAppSyncClient({
url: awsconfig.ENDPOINT,
region: awsconfig.REGION,
auth: { type: AU...

$Client //IAM auth: { type: AUTH_TYPE.AWS_IAM, credentials: Auth.currentCredentials() } //Cognito User Pool auth: { type: A...$

Demo: GraphQL

• AWS AppSync GraphQL Photo Sample
• https://github.com/aws-samples/aws-amplify-graphql
• GraphQL starter application
• ht...

AWS AppSync GraphQL Photo Sample

B
• B
B )
C
• C )
A I I
P C
• C P C P
P )

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