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)
2. AWS AppSync
3. AppSync • 4݄ʹҰൠެ։ • GraphQLϚωʔδυαʔϏε • HTTP(S)ϦΫΤετΛड͚ͯAWSαʔϏεʢLambda, DynamoDB, ElasticSearchʣʹͭͳ͗͜Έ͕Ͱ͖Δ • GraphQLͷεΩʔϚఆٛ • ΫΤϦΛࢼͤΔίϯιʔϧ෇͖ • GraphQLͷSubscriptionͱ͍͏࢓૊ΈΛ࢖ͬͯσʔλͷมߋΛ ݕ஌ˠը໘΁ͷ൓ө·Ͱग़དྷΔ
4. ΊͬͪΌັྗతʂʂ
5. ΍ͬͯΈΔ͔͠ͳ͍ʂʂ
6. ΍Γ͔ͨͬͨ͜ͱ AppSyncʹೖ໳͠·ͨ͠ʂʂ
7. Ͱ͖·ͤΜͰͨ͠!
8. Կނ͔ • ͦ΋ͦ΋ͷ໨࿦ݟ • AppSync࢖ͬͯΈ͍ͨ • Vuejs͸ॻ͚Δ͠ɺAppSync͕όοΫΤϯυ΍ͬͯ͘ΕΔͳ Βద౰ʹVueͷαϯϓϧಈ͔ͤ͹ཧղͰ͖ΔͰ͠ΐ • Vueͷαϯϓϧ͕ͳ͍ • ٧Μͩ
9. ؾ͖ͮ ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ ɾReact౳ʑͷϑϨʔϜϫʔΫ ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ ɾGraphQL
10. ؾ͖ͮ ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ ɾReact౳ʑͷϑϨʔϜϫʔΫ ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ ɾGraphQL
11. ؾ͖ͮ ෼͔ͬͯͳ͍͜ͱ͕ͨ͘͞Μ͋Δ ɾReact౳ʑͷϑϨʔϜϫʔΫ ɾAWS ֤छαʔϏεʢಛʹCognitoɺElasticSearchʣ ɾGraphQL ແཧήʔ
12. GraphQLʹ͍ͭͯௐ΂Α͏ʂ
13. 1. GraphQL֓ཁ 2. ఏএ͍ͯ͠Δ࢓૊ΈͳͲ 3. REST vs GraphQLͷਤࣜ͸ ຊ౰ʹਖ਼͍͠ͷ͔ʁ ΞδΣϯμ
14. ాத ৻ଠ࿠(@_sin_tanaka) ʢגʣ೔ຊγεςϜٕݚ / GeekLab.NAGANO ελοϑ GitHub / Medium: @sin_tanaka Իָͱਂ໷ϥδΦ͕޷͖ serverless-wsgi ʹϓϧϦΫग़ͨ͠Γͨ͠ PyCon JP 2018 ͰτʔΫηογϣϯ ← NEW!!
15. ࠓ೔ͷ໨త
17. GraphQL׬શʹཧղͨ͠ʂʂ
18. GraphQLͱ͸ • Facebook͕࢓༷ࡦఆ͍ͯ͠ΔΫΤϦݴޠ • ҰͭͷΤϯυϙΠϯτʹରͯ͠ɺΫϥΠΞϯτଆͰඞཁͳσʔ λΛࢦఆ͢Δ • RFCͰنఆ͞Εͯͳ͍ͷͰαʔϏε͝ͱʹεΩʔϚͷॻ͖ํ͸ ·ͪ·ͪ • ࣮૷΋αʔό΍αʔϏεʹΑΔ
19. GraphQLͷ࢖͍ํ 1 type Query { 2 me: User 3 } 4 5 type User { 6 id: ID 7 name: String 8 } 9 foo.scheme εΩʔϚ: αʔό΍ϚωʔδυαʔϏεଆʹఆٛ͢Δ
20. GraphQLͷ࢖͍ํ 1 { 2 me { 3 name 4 } 5 } ΫΤϦ: ΫϥΠΞϯτଆ͔Β౤͛Δσʔλ 1 { 2 "me": { 3 "name": "Luke Skywalker" 4 } 5 } https://hogehoge.com/graphql?{me{name}}
21. PROS • endpoint͕୯Ұ • ඞཁͳσʔλΛҰճͰऔಘՄೳ • ϦΫΤετճ਺͕ݮΔ • సૹྔ͕ݮΔ • औಘ݅਺΋ࢦఆՄೳ
22. CONS • RFCͰఆΊΒΕͯͳ͍ • FacebookͷRFCʹґଘ • ࣮૷͸ϥΠϒϥϦґଘ • ఆٛ͸͞Ε͍ͯΔ͕࣮૷͞Ε͍ͯͳػೳ΋
23. GraphQLͷ࢓༷ʢͰ͖Δ͜ͱʣ
24. Query • εΩʔϚʹఆٛ͞Ε͍ͯΔtype QueryΛΫϥΠΞϯτଆͰࢦఆ ͢Δ • ΫΤϦΛ؆୯ʹߏங͢Δ࢓૊Έ΋͋ΔʢΫΤϦ಺ม਺ɺ FragmentͳͲʣ
25. Query • ྫ: type Query { allUser(id: Int, first: Int): [User] getUser(role: String) me: User } type User { id: ID name: String } foo.scheme
26. Query • ྫ: { allUser(id: 1) { name } }
27. Query - Alias • ྫ: ಉ͡ΫΤϦ͕ෳ਺͋Δͷ͸μϝͳͷͰAliasΛ࢖͏ { getUser(role: admin) { id firstName lastName phone username } getUser(role: accountant) { id firstName lastName phone username } }
28. Query - Alias • ྫ: ಉ͡ΫΤϦ͕ෳ਺͋Δͷ͸μϝͳͷͰAliasΛ࢖͏ { admins: getUser(role: admin) { id firstName lastName phone username } accountants: getUser(role: accountant) { id firstName lastName phone username } }
29. Query - Fragment • ྫ: ·ͱΊ͍ͨ৔߹ { admins: getUser(role: admin) { id firstName lastName phone username } accountants: getUser(role: accountant) { id firstName lastName phone username } }
30. Query - Fragment • ྫ: ·ͱΊ͍ͨ৔߹ { admins: getUser(role: admin) { …user } accountants: getUser(role: accountant) { …user } } fragment user on User { id firstName lastName phone username }
31. Mutation • ࡞੒ / มߋ΋εΩʔϚʹఆٛ͢Δ type Mutation { createReview(episode: String, review): Review } mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) { createReview(episode: $ep, review: $review) { stars commentary } } ΫΤϦ
32. ͦͷଞ • ଞʹ΋ • Subscription • DirectiveͳͲ͕͋Δ
33. GraphQL vs REST?
34. GraphQL vs REST? • REST • endpoint͕ෳ਺ • ԿΛͲ͏ฦ͔͢͸αʔό͕ܾΊΔ • GraphQL • endpoint͕୯Ұ • ԿΛͲ͏ฦ͔͢͸ΫϥΠΞϯτ͕ܾΊΔ
35. GraphQL vs REST? • REST→αʔόαΠυଆͷ࣮૷ͷ࿩ • GraphQL→ϑϩϯτΤϯυଆͷ࣮૷ͷ࿩ ࣮૷తͳ࿩ʹͳΔͱɾɾ ౔ඨ͕ҧ͏ʂʂ
36. ࢥͬͨ͜ͱ
37. GraphQL vs REST GraphQL͕উͬͨ৔߹
38. ࢥͬͨ͜ͱ • AppSync • GraphQLϚωʔδυαʔϏε • →εΩʔϚͷఆٛΛݩʹɺDynamoDBͱ͔Lambdaɺ ElasticSearch΁ͭͳ͗͜Έ͕Ͱ͖Δ • ଞʹ΋GraphQLͷϚωʔδυαʔϏε͸૿͑ͭͭ͋Δ • GraphQLͰϦΫΤετͰ͖ΔCMSͱ͔ αʔόʔαΠυͷ࣮૷͕ෆཁ →αʔόʔαΠυΤϯδχΞधཁ͸Լ͕Γͭͭ͋Δʁ
39. ࠓޙษڧͯͬͨ͠΄͏͕ྑͦ͞͏ • ϑϩϯτΤϯυ • Facebook੡ͳͷͰReactͱ૬ੑ͍͍Μ͡Όͳ͍͔ͱউखʹ ࢥ͍ͬͯΔ • DynamoDBͳͲNoSQLͰͷσʔλઃܭ • ෳ਺ͷAWSαʔϏεͷϚωʔδυ • CloudFormationͷ࢖͍ํɺ։ൃ؀ڥͷ্ཱͪ͛
40. GraphQL׬શʹཧղͨ͠ʂʂ
41. ԶͨͪͷAppSync͸ ·ͩ͜Ε͔Βͩʂʂ