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

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

AWS AppSync

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

ΊͬͪΌັྗతʂʂ

Slide 5

Slide 5 text

΍ͬͯΈΔ͔͠ͳ͍ʂʂ

Slide 6

Slide 6 text

΍Γ͔ͨͬͨ͜ͱ AppSyncʹೖ໳͠·ͨ͠ʂʂ

Slide 7

Slide 7 text

Ͱ͖·ͤΜͰͨ͠!

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

GraphQLʹ͍ͭͯௐ΂Α͏ʂ

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

ࠓ೔ͷ໨త

Slide 16

Slide 16 text

No content

Slide 17

Slide 17 text

GraphQL׬શʹཧղͨ͠ʂʂ

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

GraphQLͷ࢓༷ʢͰ͖Δ͜ͱʣ

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

ͦͷଞ • ଞʹ΋ • Subscription • DirectiveͳͲ͕͋Δ

Slide 33

Slide 33 text

GraphQL vs REST?

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

ࢥͬͨ͜ͱ

Slide 37

Slide 37 text

GraphQL vs REST GraphQL͕উͬͨ৔߹

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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