REST API に疲れたあなたへ贈る GraphQL 入門
•
30 likes•33,609 views
This document summarizes Amazon Web Services Japan speaker Tsukagoshi Keisuke's presentation on AWS AppSync. It introduces AppSync as a fully managed GraphQL service that allows building GraphQL APIs integrated with various data sources like Amazon DynamoDB, AWS Lambda, and Elasticsearch. AppSync provides a GraphQL schema definition language to define types and queries, uses Apache Velocity Template Language to map GraphQL queries to data sources, and supports real-time subscriptions. The presentation demonstrated AppSync's capabilities using a sample photo application and GitHub repositories for getting started.
![!
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
type Query {
getTodos: [Todo]
}
enum TodoStatus {
done
pending
}
A
N I
S
D
)](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-10-320.jpg)
![)
{
"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
}
}](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-14-320.jpg)
![)
Mutation
-
mutation addPost( id:123
title:”New post!”
author:”Nadia”){
id
title
author
}
data: [{
id:123,
title:”New Post!”
author:”Nadia”
}]](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-17-320.jpg)
![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
}
}](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-18-320.jpg)
![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
)](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-20-320.jpg)
![type Query {
getTodos: [Todo]
}
type Todo {
id: ID!
name: String
description: String
status: TodoStatus
}
enum TodoStatus {
done
pending
}
Not Null
ID!
[String!]](https://image.slidesharecdn.com/jjugccce6-180526062714/85/REST-API-GraphQL-35-320.jpg)
REST API に疲れたあなたへ贈る GraphQL 入門
- 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
- 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!]
- 38. • GraphQL GraphQL • Apache Velocity Template Language VTL • • https://docs.aws.amazon.com/appsync/latest/devguide/resolver- mapping-template-reference-programming-guide.html
- 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
- 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