$30 off During Our Annual Pro Sale. View Details »

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

sin-tanaka
September 21, 2018

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

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

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

sin-tanaka

September 21, 2018
Tweet

More Decks by sin-tanaka

Other Decks in Technology

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