REST API に疲れたあなたへ贈る GraphQL 入門
•
30 likes•33,561 views
JJUG CCC 2018 Spring #jjug #jjug_ccc #ccc_e6
Recommended
More Related Content
What's hot
What's hot (20)
Similar to REST API に疲れたあなたへ贈る GraphQL 入門
Similar to REST API に疲れたあなたへ贈る GraphQL 入門 (20)
Recently uploaded
Recently uploaded (20)
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