Tweet
Tweet

Slide 1

Slide 1 text

©2019 Wantedly, Inc. GraphQLαʔόʔͷεΩʔϚϑΝʔετ։ൃΛ൒೥ܦͯ meguro.es @Wantedly, Inc 2019/10/10 Tsuyoshi Hara

Slide 2

Slide 2 text

©2019 Wantedly, Inc. Tsuyoshi Hara Frontend Engineer @Wantedly, Inc - Visit Product Squad ʹॴଐ - ৽نػೳ։ൃ΍ɺطଘػೳͷϦχϡʔΞϧͳͲΛߦ͍ͬͯ·͢ɻ - ϑϩϯτΤϯυɾGraphQL αʔόʔͷ։ൃΛ͍ͯ͠·͢ - Twitter/Github: @chloe463

Slide 3

Slide 3 text

©2019 Wantedly, Inc. Table of contents 1. લఏ஌ࣝ (GraphQLʹ͍ͭͯ) 2. ͜͜൒೥ͷ Product Squad ͷऔΓ૊Έ 3. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ

Slide 4

Slide 4 text

©2019 Wantedly, Inc. (SBQI2-ʹ͍ͭͯ

Slide 5

Slide 5 text

©2019 Wantedly, Inc. GraphQL͸ΫΤϦݴޠ • API ͷͨΊͷΫΤϦݴޠ • σʔλͷܕ (Type) Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ • ಛఆͷσʔλϕʔε΍σʔλετΞʹґଘ͠ͳ͍ • σʔλͷऔಘ: Query • σʔλͷ࡞੒ɾߋ৽ɾ࡟আ: Mutation GraphQLʹ͍ͭͯ

Slide 6

Slide 6 text

©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ 4DIFNB 2VFSZ %BUB

Slide 7

Slide 7 text

©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ ϦϨʔγϣϯΛ؆ܿʹهड़Ͱ͖Δ • ͋ΔϢʔβʔͷ friend ҰཡΛऔΓ͍ͨ৔߹ • RESTful API ͷ৔߹࠷௿2ຊͷϦΫΤετ͕ඞཁ • /user/:id ͰϢʔβʔΛ1݅औಘ • /user/:id/friends Ͱ friend ϦετΛऔಘ • GraphQL ͷ৔߹ɺ1ͭͷ Query ͰղܾͰ͖Δ • ू໿૚ͱͯ͠େ͍ʹྗΛൃشͰ͖Δ

Slide 8

Slide 8 text

©2019 Wantedly, Inc. ͜͜൒೥ͷ1SPEVDU4RVBEͷऔΓ૊Έ

Slide 9

Slide 9 text

©2019 Wantedly, Inc. Wantedly Ͱ͸ ϚΠΫϩαʔϏεԽΛਐΊ͍ͯ·͢

Slide 10

Slide 10 text

©2019 Wantedly, Inc. • طଘػೳͷେ෯ϦχϡʔΞϧΛ࣮ࢪத • ୈҰ஄͸ืू࡞੒ը໘ͷϦχϡʔΞϧ https://www.wantedly.com/companies/wantedly/post_articles/182854 • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯΛ੾Γ่ͯ͠ϚΠΫϩαʔϏεԽ • ݱࡏผػೳͷϦχϡʔΞϧΛ࣮ࢪத • BFF ͱͯ͠ GraphQL αʔόʔΛಋೖ • ૿͍͑ͯ͘όοΫΤϯυͷϚΠΫϩαʔϏεͷલஈʹ GraphQL αʔόʔΛઃஔ • ϑϩϯτΤϯυ͸όοΫΤϯυͷϚΠΫϩαʔϏεΛҙࣝ͢Δ͜ͱͳ͘σʔλΛऔಘ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ͜͜൒೥ͷऔΓ૊Έ

Slide 11

Slide 11 text

©2019 Wantedly, Inc. εΩʔϚΛఆٛ͢Δͱ͜Ζ͔Β։ൃΛελʔτ • طଘػೳͷAPIͷϦΫΤετɾϨεϙϯεΛચ͍ग़͠ɺGraphQLͷεΩʔϚΛఆٛ • Resolver ͸࣮૷ͤͣɺͱΓ͋͑ͣϞοΫͷϨεϙϯεΛฦͤΔΑ͏ʹ • ϞοΫΛฦͤΔ͜ͱͰϑϩϯτΤϯυ͸όοΫΤϯυͷ࣮૷Λ଴ͨͣʹ࣮૷ΛਐΊΔ͜ͱ͕Ͱ͖ΔΑ͏ʹ GraphQL αʔόʔ։ൃ

Slide 12

Slide 12 text

©2019 Wantedly, Inc. NexusΛ࢖ͬͯTypeScriptͷίʔυ͔ΒGraphQLͷεΩʔϚΛఆٛ • Nexus Λ࢖͍ίʔυ͔ΒGraphQLͷεΩʔϚͱTypeScriptͷܕΛੜ੒ • TypeScript ͷίʔυʹूதͰ͖ GraphQLͷܕͷੈքͱTypeScriptͷܕͷੈքΛߦ͖དྷ͢Δඞཁ͕ͳ͍ Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ

Slide 13

Slide 13 text

©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ NexusͰͷTypeఆٛ

Slide 14

Slide 14 text

©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ NexusͰͷQueryఆٛ

Slide 15

Slide 15 text

©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ ੜ੒͞ΕͨGraphQLͷεΩʔϚϑΝΠϧ

Slide 16

Slide 16 text

©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ ੜ੒͞ΕͨTypeScriptͷܕ

Slide 17

Slide 17 text

©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ

Slide 18

Slide 18 text

©2019 Wantedly, Inc. όοΫΤϯυ͔ΒϑϩϯτΤϯυ·Ͱ ܕ৘ใΛอ࣋

Slide 19

Slide 19 text

©2019 Wantedly, Inc. • APIఆ͔ٛΒΫϥΠΞϯτϑΝΠϧͱܕఆٛΛੜ੒ • όοΫΤϯυαʔόͷ Swagger / .proto ͔Β open-api-generator / gRPC tools Λ࢖ͬͯΫϥΠΞϯτϑΝΠϧͱܕఆٛ ϑΝΠϧΛੜ੒ • ϑϩϯτΤϯυͰ΋ Apollo Λ࢖ͬͯܕఆٛΛੜ੒ • GraphQL αʔόʔʹରͯ͠ Introspection ͱ͍͏λΠϓͷ Query ΛϦΫΤετ͢Δ͜ͱͰεΩʔϚ৘ใΛμ΢ϯϩʔυ͢ Δ͜ͱ͕Մೳ • εΩʔϚ৘ใͱιʔείʔυ಺ͷ Query / Mutation ͔ΒܕఆٛΛੜ੒ ܕ৘ใͷอ࣋

Slide 20

Slide 20 text

©2019 Wantedly, Inc. ܕ৘ใͷอ࣋

Slide 21

Slide 21 text

©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ

Slide 22

Slide 22 text

©2019 Wantedly, Inc. Apollo ʹΑΓੜ੒͞ΕΔܕͷ͓͔͛Ͱ
 ϑϩϯτΤϯυͷੜ࢈ੑ͸্͕ͬͨ • MVP։ൃ࣌ɺ͸͡Ίʹ Presentational Component Λ storybook Λ࢖ͬͯେྔʹ։ൃ • Component ͕ἧͬͨͱ͜ΖͰ Container Component / GraphQL ͱͭͳ͗ࠐΈ • ࠷ॳ͔Βܕ৘ใΛ࢖͑ͨ͜ͱͰɺComponent ઃܭͳͲ͕͏·͍͖ͭ͘ͳ͗͜Έ΋1ਓͰ1.5೔ఔ౓Ͱ׬ྃ • εΩʔϚ͕͋Γܕੜ੒͕Ͱ͖ͨ͜ͱͰɺணख͔Β2िؒ΄ͲͰMVPΛ։ൃ͢Δ͜ͱ͕Ͱ͖ͨ εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱ

Slide 23

Slide 23 text

©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ GraphQLαʔόʔͷ։ൃ͕ϘτϧωοΫʹ • ։ൃମ੍: ϑϩϯτΤϯυઐ೚1໊ / ϑϩϯτΤϯυ + BFF 1໊ / BFF + όοΫΤϯυ 1໊ / όοΫΤϯυઐ೚1໊ • Ճ͑ͯɺ8݄9݄͸αϚʔΠϯλʔϯੜ (ϑϩϯτΤϯυ) ͕3໊ • MVP·Ͱͷ։ൃ͸ͱͯ΋εϜʔζͩͬͨ • ͕ͩ͞ΒʹػೳΛ௥Ճͯ͘͠ஈ֊Ͱܕमਖ਼͕Կ౓ͱͳ͘ൃੜ • Πϯλʔϯੜ͕ͨͪΨϯΨϯ։ൃͯ͘͠ΕΔͷ΋ഥंΛ͔͚ͨ (خ͍͠൵໐) • ܕ͕मਖ਼͞Εͳ͍ͱϑϩϯτଆͰ΋ܕੜ੒͕Ͱ͖ͣ଴ͪঢ়ଶʹ

Slide 24

Slide 24 text

©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ ܕͷमਖ਼͸ϑϩϯτΤϯυResolver ͷ։ൃ͸όοΫΤϯυ • ࣮ࡍϦΫΤετ͢ΔଆΛΑ͘஌͍ͬͯΔͷ͸ϑϩϯτΤϯυΤϯδχΞͱ͍͏͜ͱͰɺ
 Req/Res ͷܕमਖ਼͸ϑϩϯτΤϯυΤϯδχΞ͕୲౰ • όοΫΤϯυͷϚΠΫϩαʔϏεαʔϏεͱܨ͙෦෼ (Resolver) ͸όοΫΤϯυΤϯδχΞ͕୲౰ • ͜ΕʹΑΓϑϩϯτΤϯυଆ͕GraphQLαʔόʔͷमਖ਼Λ଴ͭ͜ͱͳ͘ਐΊΒΕΔΑ͏ʹͳͬͨ • ܕ৘ใ͑͋͞Ε͹ϞοΫΛฦ͢͜ͱ͕Ͱ͖ɺApollo ʹΑΔܕੜ੒΋Ͱ͖Δ

Slide 25

Slide 25 text

©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ܕͷमਖ਼ʹ͔͔Δίετ͕େ͖͍ • ։ൃ͔࣌ͩΒΧδϡΞϧʹσϓϩΠͰ͖͍ͯΔ͕ϦϦʔεͨ͋͠ͱͷมߋ͸େม • มߋ͍ͨ͠΋ͷΛҰ୴ deprecated ʹ͠ɺ৽͍͠ field type ௥ՃɺϑϩϯτଆΛमਖ਼ɺݹ͍ field Λ࡟আͱ͍ͬͨख ॱΛ౿Ήඞཁ͕͋Δ • ͏·͍͔͘ͳͯ͘ྑ͘ͳ໊͍લͷ Query ͕ੜ·Εͯ͠·ͬͨ (…V2 తͳ)

Slide 26

Slide 26 text

©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ։ൃॳظஈ֊ͰεΩʔϚΛܾΊ͖Δͷ͕೉͍͠ • ϦχϡʔΞϧͳͷͰɺطଘͷ API Λચ͍ग़͠εΩʔϚΛܾΊ͍ͯͬͨ • ৽͍͠σβΠϯ্͕͕ΔલʹܾΊͨͷͰɺॳظʹܾΊ͍ͯͨ΋ͷͰ͸ରԠͰ͖ͳ͍΋ͷ͕Ͱ͖ͯͯ͠·ͬͨ • ࣍ճҎ߱ͷ TRY: νʔϜશһͰϨϏϡʔ͢ΔձΛ։͘ • ։ൃॳظஈ֊ʹ2ਓ͚ͩͰܾΊͨͱ͍͏ͷ΋Α͘ͳ͔ͬͨɺͱ͍͏൓ল͔Β • ։ൃதͷमਖ਼͸͋Δఔ౓࢓ํͳ͍͕ɺස౓͕ଟ͗ͨ͢ • υϝΠϯ஌ࣝͷ͋ΔਓɺεΩʔϚઃܭܦݧऀΛؚΊͨνʔϜશһͱڞ༗͢Δ͜ͱ͕େࣄͩͱߟ͍͑ͯΔ

Slide 27

Slide 27 text

©2019 Wantedly, Inc. ·ͱΊ

Slide 28

Slide 28 text

©2019 Wantedly, Inc. ·ͱΊ • Nexus΍ApolloΛ࢖ͬͨίʔυੜ੒ɾܕੜ੒͸Ғେ • ܕ͕͋Δ͜ͱʹΑΓϑϩϯτΤϯυͷੜ࢈ੑ͸͕͍͋ͬͯ Δͱײ͍ͯ͡Δ • εΩʔϚϑΝʔετ։ൃ͸೉͍͠

Slide 29

Slide 29 text

©2019 Wantedly, Inc. Thank You!