AppSync入門できなかったのでGraphQLに入門した

2018/9/21 JAWS-UG長野でのLT

【2018 秋の部】AWS Cloud Express Roadshow in 長野 後夜祭
https://jawsug-nagano.connpass.com/event/99668/

Transcript

1. AppSyncʹೖ໳Ͱ͖ͳ͔ͬͨ
   ͷͰGraphQLʹೖ໳ͨ͠
   ## Shintaro TANAKA (@_sin_tanaka)
   

   View Slide

2. AWS AppSync
   

   View Slide

3. AppSync
   • 4݄ʹҰൠެ։
   • GraphQLϚωʔδυαʔϏε
   • HTTP(S)ϦΫΤετΛड͚ͯAWSαʔϏεʢLambda,
   DynamoDB, ElasticSearchʣʹͭͳ͗͜Έ͕Ͱ͖Δ
   • GraphQLͷεΩʔϚఆٛ
   • ΫΤϦΛࢼͤΔίϯιʔϧ෇͖
   • GraphQLͷSubscriptionͱ͍͏࢓૊ΈΛ࢖ͬͯσʔλͷมߋΛ
   ݕ஌ˠը໘΁ͷ൓ө·Ͱग़དྷΔ
   

   View Slide

4. ΊͬͪΌັྗతʂʂ
   

   View Slide

5. ΍ͬͯΈΔ͔͠ͳ͍ʂʂ
   

   View Slide

6. ΍Γ͔ͨͬͨ͜ͱ
   AppSyncʹೖ໳͠·ͨ͠ʂʂ
   

   View Slide

7. Ͱ͖·ͤΜͰͨ͠!
   

   View Slide

8. Կނ͔
   • ͦ΋ͦ΋ͷ໨࿦ݟ
   • AppSync࢖ͬͯΈ͍ͨ
   • Vuejs͸ॻ͚Δ͠ɺAppSync͕όοΫΤϯυ΍ͬͯ͘ΕΔͳ
   Βద౰ʹVueͷαϯϓϧಈ͔ͤ͹ཧղͰ͖ΔͰ͠ΐ
   • Vueͷαϯϓϧ͕ͳ͍
   • ٧Μͩ
   

   View Slide

9. ؾ͖ͮ
   ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ
   ɾReact౳ʑͷϑϨʔϜϫʔΫ
   ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ
   ɾGraphQL
   

   View Slide

10. ؾ͖ͮ
    ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ
    ɾReact౳ʑͷϑϨʔϜϫʔΫ
    ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ
    ɾGraphQL
    

    View Slide

11. ؾ͖ͮ
    ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ
    ɾReact౳ʑͷϑϨʔϜϫʔΫ
    ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ
    ɾGraphQL
    ແཧήʔ
    

    View Slide

12. GraphQLʹ͍ͭͯௐ΂Α͏ʂ
    

    View Slide

13. 1. GraphQL֓ཁ
    2. ఏএ͍ͯ͠Δ࢓૊ΈͳͲ
    3. REST vs GraphQLͷਤࣜ͸
    ຊ౰ʹਖ਼͍͠ͷ͔ʁ
    ΞδΣϯμ
    

    View Slide

14. ాத ৻ଠ࿠(@_sin_tanaka)
    ʢגʣ೔ຊγεςϜٕݚ / GeekLab.NAGANO ελοϑ
    GitHub / Medium: @sin_tanaka
    Իָͱਂ໷ϥδΦ͕޷͖
    serverless-wsgi ʹϓϧϦΫग़ͨ͠Γͨ͠
    PyCon JP 2018 ͰτʔΫηογϣϯ ← NEW!!
    

    View Slide

15. ࠓ೔ͷ໨త
    

    View Slide

16. View Slide

17. GraphQL׬શʹཧղͨ͠ʂʂ
    

    View Slide

18. GraphQLͱ͸
    • Facebook͕࢓༷ࡦఆ͍ͯ͠ΔΫΤϦݴޠ
    • ҰͭͷΤϯυϙΠϯτʹରͯ͠ɺΫϥΠΞϯτଆͰඞཁͳσʔ
    λΛࢦఆ͢Δ
    • RFCͰنఆ͞Εͯͳ͍ͷͰαʔϏε͝ͱʹεΩʔϚͷॻ͖ํ͸
    ·ͪ·ͪ
    • ࣮૷΋αʔό΍αʔϏεʹΑΔ
    

    View Slide

19. GraphQLͷ࢖͍ํ
    1 type Query {
    2 me: User
    3 }
    4
    5 type User {
    6 id: ID
    7 name: String
    8 }
    9
    foo.scheme
    εΩʔϚ: αʔό΍ϚωʔδυαʔϏεଆʹఆٛ͢Δ
    

    View Slide

20. GraphQLͷ࢖͍ํ
    1 {
    2 me {
    3 name
    4 }
    5 }
    ΫΤϦ: ΫϥΠΞϯτଆ͔Β౤͛Δσʔλ
    1 {
    2 "me": {
    3 "name": "Luke Skywalker"
    4 }
    5 }
    https://hogehoge.com/graphql?{me{name}}
    

    View Slide

21. PROS
    • endpoint͕୯Ұ
    • ඞཁͳσʔλΛҰճͰऔಘՄೳ
    • ϦΫΤετճ਺͕ݮΔ
    • సૹྔ͕ݮΔ
    • औಘ݅਺΋ࢦఆՄೳ
    

    View Slide

22. CONS
    • RFCͰఆΊΒΕͯͳ͍
    • FacebookͷRFCʹґଘ
    • ࣮૷͸ϥΠϒϥϦґଘ
    • ఆٛ͸͞Ε͍ͯΔ͕࣮૷͞Ε͍ͯͳػೳ΋
    

    View Slide

23. GraphQLͷ࢓༷ʢͰ͖Δ͜ͱʣ
    

    View Slide

24. Query
    • εΩʔϚʹఆٛ͞Ε͍ͯΔtype QueryΛΫϥΠΞϯτଆͰࢦఆ
    ͢Δ
    • ΫΤϦΛ؆୯ʹߏங͢Δ࢓૊Έ΋͋ΔʢΫΤϦ಺ม਺ɺ
    FragmentͳͲʣ
    

    View Slide

25. Query
    • ྫ:
    type Query {
    allUser(id: Int, first: Int): [User]
    getUser(role: String)
    me: User
    }
    type User {
    id: ID
    name: String
    }
    foo.scheme
    

    View Slide

26. Query
    • ྫ:
    {
    allUser(id: 1) {
    name
    }
    }
    

    View Slide

27. Query - Alias
    • ྫ: ಉ͡ΫΤϦ͕ෳ਺͋Δͷ͸μϝͳͷͰAliasΛ࢖͏
    {
    getUser(role: admin) {
    id
    firstName
    lastName
    phone
    username
    }
    getUser(role: accountant) {
    id
    firstName
    lastName
    phone
    username
    }
    }
    

    View Slide

28. Query - Alias
    • ྫ: ಉ͡ΫΤϦ͕ෳ਺͋Δͷ͸μϝͳͷͰAliasΛ࢖͏
    {
    admins: getUser(role: admin) {
    id
    firstName
    lastName
    phone
    username
    }
    accountants: getUser(role: accountant) {
    id
    firstName
    lastName
    phone
    username
    }
    }
    

    View Slide

29. Query - Fragment
    • ྫ: ·ͱΊ͍ͨ৔߹
    {
    admins: getUser(role: admin) {
    id
    firstName
    lastName
    phone
    username
    }
    accountants: getUser(role: accountant) {
    id
    firstName
    lastName
    phone
    username
    }
    }
    

    View Slide

30. Query - Fragment
    • ྫ: ·ͱΊ͍ͨ৔߹
    {
    admins: getUser(role: admin) {
    …user
    }
    accountants: getUser(role: accountant) {
    …user
    }
    }
    fragment user on User {
    id
    firstName
    lastName
    phone
    username
    }
    

    View Slide

31. Mutation
    • ࡞੒ / มߋ΋εΩʔϚʹఆٛ͢Δ
    type Mutation {
    createReview(episode: String, review): Review
    }
    mutation CreateReviewForEpisode($ep: Episode!,
    $review: ReviewInput!) {
    createReview(episode: $ep, review: $review) {
    stars
    commentary
    }
    }
    ΫΤϦ
    

    View Slide

32. ͦͷଞ
    • ଞʹ΋
    • Subscription
    • DirectiveͳͲ͕͋Δ
    

    View Slide

33. GraphQL vs REST?
    

    View Slide

34. GraphQL vs REST?
    • REST
    • endpoint͕ෳ਺
    • ԿΛͲ͏ฦ͔͢͸αʔό͕ܾΊΔ
    • GraphQL
    • endpoint͕୯Ұ
    • ԿΛͲ͏ฦ͔͢͸ΫϥΠΞϯτ͕ܾΊΔ
    

    View Slide

35. GraphQL vs REST?
    • REST→αʔόαΠυଆͷ࣮૷ͷ࿩
    • GraphQL→ϑϩϯτΤϯυଆͷ࣮૷ͷ࿩
    ࣮૷తͳ࿩ʹͳΔͱɾɾ
    ౔ඨ͕ҧ͏ʂʂ
    

    View Slide

36. ࢥͬͨ͜ͱ
    

    View Slide

37. GraphQL vs REST
    GraphQL͕উͬͨ৔߹
    

    View Slide

38. ࢥͬͨ͜ͱ
    • AppSync
    • GraphQLϚωʔδυαʔϏε
    • →εΩʔϚͷఆٛΛݩʹɺDynamoDBͱ͔Lambdaɺ
    ElasticSearch΁ͭͳ͗͜Έ͕Ͱ͖Δ
    • ଞʹ΋GraphQLͷϚωʔδυαʔϏε͸૿͑ͭͭ͋Δ
    • GraphQLͰϦΫΤετͰ͖ΔCMSͱ͔
    αʔόʔαΠυͷ࣮૷͕ෆཁ
    →αʔόʔαΠυΤϯδχΞधཁ͸Լ͕Γͭͭ͋Δʁ
    

    View Slide

39. ࠓޙษڧͯͬͨ͠΄͏͕ྑͦ͞͏
    • ϑϩϯτΤϯυ
    • Facebook੡ͳͷͰReactͱ૬ੑ͍͍Μ͡Όͳ͍͔ͱউखʹ
    ࢥ͍ͬͯΔ
    • DynamoDBͳͲNoSQLͰͷσʔλઃܭ
    • ෳ਺ͷAWSαʔϏεͷϚωʔδυ
    • CloudFormationͷ࢖͍ํɺ։ൃ؀ڥͷ্ཱͪ͛
    

    View Slide

40. GraphQL׬શʹཧղͨ͠ʂʂ
    

    View Slide

41. ԶͨͪͷAppSync͸
    ·ͩ͜Ε͔Βͩʂʂ
    

    View Slide