Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

19,853 views

Published on

JJUG CCC 2018 Spring
#jjug #jjug_ccc #ccc_e6

Published in: Technology

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

  1. 1. Amazon Web Services Japan Tsukagoshi Keisuke REST API GraphQL JJUG CCC 2018 Spring #ccc_e6
  2. 2. Who am I ? e gd B A @ Mobile / DevOps / Serverless W SJ ba W J c S=
  3. 3. Overview c G E E R Q Aa A G I G I G S T Q LPR I We G
  4. 4. GraphQL
  5. 5. GraphQL ? • GraphQL API TypeSystem • GraphQL
  6. 6. GraphQL -REST API - • REST API • API • API • API • • API • Request / Response
  7. 7. GraphQL • , • • API • API
  8. 8. GraphQL – GraphQL - • P ) A • A ) B A C • A I B A P )
  9. 9. GraphQL – GraphQL - • P ) A • A ) B A C • A I B A P )
  10. 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. 11. )
  12. 12. )
  13. 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. 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. 15. ) != Graph database NoSQL, Relational, HTTP, etc. GraphQL /posts /postInfo /postJustTitle /postsByAuthor /postNameStartsWithX /commentsOnPost
  16. 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. 17. ) Mutation - mutation addPost( id:123 title:”New post!” author:”Nadia”){ id title author } data: [{ id:123, title:”New Post!” author:”Nadia” }]
  18. 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. 19. ) ) Subscription NewPostSub { addedPost{…} } WebSocket URL and Connection Payload Secure Websocket Connection (wss://)
  20. 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. 21. Demo:
  22. 22. AppSync
  23. 23. AWS AppSync GraphQL GraphQL
  24. 24. • • • • • • • • • • Sync
  25. 25. AppSync • • • • • • •
  26. 26. AppSync Overview AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch
  27. 27. dynamoDB AmazonES Amazon DynamoDB ElasticSearch e.t.c
  28. 28. Lambda 3rdPartyAPI Lambda DataSource WebAPI
  29. 29. AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch
  30. 30. • • GraphQL API 1 GraphQL SDL(Schema Definition Language)
  31. 31. schema { query:Query mutation: Mutation subscription: Subscription } Query : Mutation : Subscription :
  32. 32. type Query { getTodos: [Todo] } type Todo { id: ID! name: String description: String status: TodoStatus } enum TodoStatus { done pending } Not Null ID! [String!]
  33. 33. Resolver Mapping Template
  34. 34. AppSync Overview AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch
  35. 35. • GraphQL GraphQL • Apache Velocity Template Language VTL • • https://docs.aws.amazon.com/appsync/latest/devguide/resolver- mapping-template-reference-programming-guide.html
  36. 36. • • • • • • ID / •
  37. 37. • •
  38. 38. : { "version" : "2017-02-28", "operation" : "GetItem", "key" : { "id" : { "S" : "${context.arguments.id}" } } }
  39. 39. : $utils.toJson($context.result) { "id" : ${context.data.id}, "title" : "${context.data.theTitle}", "content" : "${context.data.body1} ${context.data.body2}" }
  40. 40. DynamoDB
  41. 41. AppSync Overview AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch
  42. 42. GraphQL Endpoint export default { "graphqlEndpoint": "https://**.appsync-api.**.amazonaws.com/graphql", "region": "us-east-1", "authenticationType": "API_KEY", "apiKey": ”***" }
  43. 43. 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/
  44. 44. Client //API Key const client = new AWSAppSyncClient({ url: awsconfig.ENDPOINT, region: awsconfig.REGION, auth: { type: AUTH_TYPE.API_KEY, apiKey: awsconfig.apiKey} });
  45. 45. 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 }
  46. 46. Demo: GraphQL
  47. 47. • 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
  48. 48. AWS AppSync GraphQL Photo Sample
  49. 49. B • B B ) C • C ) A I I P C • C P C P P )
  50. 50. Happy coding with AppSync! AWS AppSync Amazon DynamoDB AWS Lambda ElasticSearch AWS AppSync GraphQL API

×