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.

of

REST API に疲れたあなたへ贈る GraphQL 入門 Slide 1 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 2 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 3 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 4 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 5 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 6 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 7 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 8 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 9 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 10 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 11 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 12 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 13 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 14 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 15 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 16 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 17 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 18 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 19 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 20 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 21 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 22 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 23 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 24 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 25 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 26 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 27 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 28 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 29 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 30 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 31 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 32 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 33 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 34 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 35 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 36 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 37 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 38 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 39 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 40 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 41 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 42 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 43 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 44 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 45 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 46 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 47 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 48 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 49 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 50 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 51 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 52 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 53 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 54 REST API に疲れたあなたへ贈る GraphQL 入門 Slide 55
Upcoming SlideShare
What to Upload to SlideShare
Next
Download to read offline and view in fullscreen.

30 Likes

Share

Download to read offline

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

Download to read offline

JJUG CCC 2018 Spring
#jjug #jjug_ccc #ccc_e6

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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
  • TakuyaHigurashi

    Nov. 13, 2018
  • shimabukuro

    Oct. 13, 2018
  • TaishiAkamatsu

    Oct. 9, 2018
  • YukikoSato3

    Sep. 18, 2018
  • WilliamTaiTW

    Sep. 18, 2018
  • siokou

    Jun. 1, 2018
  • TeguriToshifumi

    May. 30, 2018
  • RyoheiYamzaki

    May. 30, 2018
  • yoshihirosumida75

    May. 29, 2018
  • TakumaYamanaka

    May. 29, 2018
  • pedraponte

    May. 28, 2018
  • uggds

    May. 28, 2018
  • takashiimura10

    May. 28, 2018
  • masayuki1983

    May. 28, 2018
  • saicologic

    May. 28, 2018
  • syuichitsuji

    May. 28, 2018
  • taizo

    May. 28, 2018
  • hiroyukinagata16503

    May. 28, 2018
  • tomoakisuzuki2

    May. 28, 2018
  • aha_oretama

    May. 28, 2018

JJUG CCC 2018 Spring #jjug #jjug_ccc #ccc_e6

Views

Total views

32,683

On Slideshare

0

From embeds

0

Number of embeds

8,922

Actions

Downloads

59

Shares

0

Comments

0

Likes

30

×