GraphQLサーバーのスキーマファースト開発を半年経て

サービスのコア機能リニューアルの際に導入したGraphQLサーバーの開発を経て、スキーマファースト開発でよかったこと・困ったことをまとめました。

Transcript

1. ©2019 Wantedly, Inc. GraphQLαʔόʔͷεΩʔϚϑΝʔετ։ൃΛ൒೥ܦͯ meguro.es @Wantedly, Inc 2019/10/10 Tsuyoshi Hara
2. ©2019 Wantedly, Inc. Tsuyoshi Hara Frontend Engineer @Wantedly, Inc - Visit Product Squad ʹॴଐ - ৽نػೳ։ൃ΍ɺطଘػೳͷϦχϡʔΞϧͳͲΛߦ͍ͬͯ·͢ɻ - ϑϩϯτΤϯυɾGraphQL αʔόʔͷ։ൃΛ͍ͯ͠·͢ - Twitter/Github: @chloe463
3. ©2019 Wantedly, Inc. Table of contents 1. લఏ஌ࣝ (GraphQLʹ͍ͭͯ) 2. ͜͜൒೥ͷ Product Squad ͷऔΓ૊Έ 3. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ
4. ©2019 Wantedly, Inc. (SBQI2-
   ʹ͍ͭͯ
5. ©2019 Wantedly, Inc. GraphQL͸ΫΤϦݴޠ • API ͷͨΊͷΫΤϦݴޠ • σʔλͷܕ (Type) Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ • ಛఆͷσʔλϕʔε΍σʔλετΞʹґଘ͠ͳ͍ • σʔλͷऔಘ: Query • σʔλͷ࡞੒ɾߋ৽ɾ࡟আ: Mutation GraphQLʹ͍ͭͯ
6. ©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ 4DIFNB 2VFSZ %BUB
7. ©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ ϦϨʔγϣϯΛ؆ܿʹهड़Ͱ͖Δ • ͋ΔϢʔβʔͷ friend ҰཡΛऔΓ͍ͨ৔߹ • RESTful API ͷ৔߹࠷௿2ຊͷϦΫΤετ͕ඞཁ • /user/:id ͰϢʔβʔΛ1݅औಘ • /user/:id/friends Ͱ friend ϦετΛऔಘ • GraphQL ͷ৔߹ɺ1ͭͷ Query ͰղܾͰ͖Δ • ू໿૚ͱͯ͠େ͍ʹྗΛൃشͰ͖Δ
8. ©2019 Wantedly, Inc. ͜͜൒೥ͷ1SPEVDU
   4RVBEͷऔΓ૊Έ
9. ©2019 Wantedly, Inc. Wantedly Ͱ͸ ϚΠΫϩαʔϏεԽΛਐΊ͍ͯ·͢
10. ©2019 Wantedly, Inc. • طଘػೳͷେ෯ϦχϡʔΞϧΛ࣮ࢪத • ୈҰ஄͸ืू࡞੒ը໘ͷϦχϡʔΞϧ https://www.wantedly.com/companies/wantedly/post_articles/182854 • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯΛ੾Γ่ͯ͠ϚΠΫϩαʔϏεԽ • ݱࡏผػೳͷϦχϡʔΞϧΛ࣮ࢪத • BFF ͱͯ͠ GraphQL αʔόʔΛಋೖ • ૿͍͑ͯ͘όοΫΤϯυͷϚΠΫϩαʔϏεͷલஈʹ GraphQL αʔόʔΛઃஔ • ϑϩϯτΤϯυ͸όοΫΤϯυͷϚΠΫϩαʔϏεΛҙࣝ͢Δ͜ͱͳ͘σʔλΛऔಘ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ͜͜൒೥ͷऔΓ૊Έ
11. ©2019 Wantedly, Inc. εΩʔϚΛఆٛ͢Δͱ͜Ζ͔Β։ൃΛελʔτ • طଘػೳͷAPIͷϦΫΤετɾϨεϙϯεΛચ͍ग़͠ɺGraphQLͷεΩʔϚΛఆٛ • Resolver ͸࣮૷ͤͣɺͱΓ͋͑ͣϞοΫͷϨεϙϯεΛฦͤΔΑ͏ʹ • ϞοΫΛฦͤΔ͜ͱͰϑϩϯτΤϯυ͸όοΫΤϯυͷ࣮૷Λ଴ͨͣʹ࣮૷ΛਐΊΔ͜ͱ͕Ͱ͖ΔΑ͏ʹ GraphQL αʔόʔ։ൃ
12. ©2019 Wantedly, Inc. NexusΛ࢖ͬͯTypeScriptͷίʔυ͔ΒGraphQLͷεΩʔϚΛఆٛ • Nexus Λ࢖͍ίʔυ͔ΒGraphQLͷεΩʔϚͱTypeScriptͷܕΛੜ੒ • TypeScript ͷίʔυʹूதͰ͖ GraphQLͷܕͷੈքͱTypeScriptͷܕͷੈքΛߦ͖དྷ͢Δඞཁ͕ͳ͍ Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ
13. ©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ NexusͰͷTypeఆٛ
14. ©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ NexusͰͷQueryఆٛ
15. ©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ ੜ੒͞ΕͨGraphQLͷεΩʔϚϑΝΠϧ
16. ©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ ੜ੒͞ΕͨTypeScriptͷܕ
17. ©2019 Wantedly, Inc. Nexus Λ࢖ͬͨ GraphQL αʔόʔ։ൃ
18. ©2019 Wantedly, Inc. όοΫΤϯυ͔ΒϑϩϯτΤϯυ·Ͱ ܕ৘ใΛอ࣋
19. ©2019 Wantedly, Inc. • APIఆ͔ٛΒΫϥΠΞϯτϑΝΠϧͱܕఆٛΛੜ੒ • όοΫΤϯυαʔόͷ Swagger / .proto ͔Β open-api-generator / gRPC tools Λ࢖ͬͯΫϥΠΞϯτϑΝΠϧͱܕఆٛ ϑΝΠϧΛੜ੒ • ϑϩϯτΤϯυͰ΋ Apollo Λ࢖ͬͯܕఆٛΛੜ੒ • GraphQL αʔόʔʹରͯ͠ Introspection ͱ͍͏λΠϓͷ Query ΛϦΫΤετ͢Δ͜ͱͰεΩʔϚ৘ใΛμ΢ϯϩʔυ͢ Δ͜ͱ͕Մೳ • εΩʔϚ৘ใͱιʔείʔυ಺ͷ Query / Mutation ͔ΒܕఆٛΛੜ੒ ܕ৘ใͷอ࣋
20. ©2019 Wantedly, Inc. ܕ৘ใͷอ࣋
21. ©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ
22. ©2019 Wantedly, Inc. Apollo ʹΑΓੜ੒͞ΕΔܕͷ͓͔͛Ͱ
 ϑϩϯτΤϯυͷੜ࢈ੑ͸্͕ͬͨ • MVP։ൃ࣌ɺ͸͡Ίʹ Presentational Component Λ storybook Λ࢖ͬͯେྔʹ։ൃ • Component ͕ἧͬͨͱ͜ΖͰ Container Component / GraphQL ͱͭͳ͗ࠐΈ • ࠷ॳ͔Βܕ৘ใΛ࢖͑ͨ͜ͱͰɺComponent ઃܭͳͲ͕͏·͍͖ͭ͘ͳ͗͜Έ΋1ਓͰ1.5೔ఔ౓Ͱ׬ྃ • εΩʔϚ͕͋Γܕੜ੒͕Ͱ͖ͨ͜ͱͰɺணख͔Β2िؒ΄ͲͰMVPΛ։ൃ͢Δ͜ͱ͕Ͱ͖ͨ εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱ
23. ©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ GraphQLαʔόʔͷ։ൃ͕ϘτϧωοΫʹ • ։ൃମ੍: ϑϩϯτΤϯυઐ೚1໊ / ϑϩϯτΤϯυ + BFF 1໊ / BFF + όοΫΤϯυ 1໊ / όοΫΤϯυઐ೚1໊ • Ճ͑ͯɺ8݄9݄͸αϚʔΠϯλʔϯੜ (ϑϩϯτΤϯυ) ͕3໊ • MVP·Ͱͷ։ൃ͸ͱͯ΋εϜʔζͩͬͨ • ͕ͩ͞ΒʹػೳΛ௥Ճͯ͘͠ஈ֊Ͱܕमਖ਼͕Կ౓ͱͳ͘ൃੜ • Πϯλʔϯੜ͕ͨͪΨϯΨϯ։ൃͯ͘͠ΕΔͷ΋ഥंΛ͔͚ͨ (خ͍͠൵໐) • ܕ͕मਖ਼͞Εͳ͍ͱϑϩϯτଆͰ΋ܕੜ੒͕Ͱ͖ͣ଴ͪঢ়ଶʹ
24. ©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ ܕͷमਖ਼͸ϑϩϯτΤϯυResolver ͷ։ൃ͸όοΫΤϯυ • ࣮ࡍϦΫΤετ͢ΔଆΛΑ͘஌͍ͬͯΔͷ͸ϑϩϯτΤϯυΤϯδχΞͱ͍͏͜ͱͰɺ
 Req/Res ͷܕमਖ਼͸ϑϩϯτΤϯυΤϯδχΞ͕୲౰ • όοΫΤϯυͷϚΠΫϩαʔϏεαʔϏεͱܨ͙෦෼ (Resolver) ͸όοΫΤϯυΤϯδχΞ͕୲౰ • ͜ΕʹΑΓϑϩϯτΤϯυଆ͕GraphQLαʔόʔͷमਖ਼Λ଴ͭ͜ͱͳ͘ਐΊΒΕΔΑ͏ʹͳͬͨ • ܕ৘ใ͑͋͞Ε͹ϞοΫΛฦ͢͜ͱ͕Ͱ͖ɺApollo ʹΑΔܕੜ੒΋Ͱ͖Δ
25. ©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ܕͷमਖ਼ʹ͔͔Δίετ͕େ͖͍ • ։ൃ͔࣌ͩΒΧδϡΞϧʹσϓϩΠͰ͖͍ͯΔ͕ϦϦʔεͨ͋͠ͱͷมߋ͸େม • มߋ͍ͨ͠΋ͷΛҰ୴ deprecated ʹ͠ɺ৽͍͠ field type ௥ՃɺϑϩϯτଆΛमਖ਼ɺݹ͍ field Λ࡟আͱ͍ͬͨख ॱΛ౿Ήඞཁ͕͋Δ • ͏·͍͔͘ͳͯ͘ྑ͘ͳ໊͍લͷ Query ͕ੜ·Εͯ͠·ͬͨ (…V2 తͳ)
26. ©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ։ൃॳظஈ֊ͰεΩʔϚΛܾΊ͖Δͷ͕೉͍͠ • ϦχϡʔΞϧͳͷͰɺطଘͷ API Λચ͍ग़͠εΩʔϚΛܾΊ͍ͯͬͨ • ৽͍͠σβΠϯ্͕͕ΔલʹܾΊͨͷͰɺॳظʹܾΊ͍ͯͨ΋ͷͰ͸ରԠͰ͖ͳ͍΋ͷ͕Ͱ͖ͯͯ͠·ͬͨ • ࣍ճҎ߱ͷ TRY: νʔϜશһͰϨϏϡʔ͢ΔձΛ։͘ • ։ൃॳظஈ֊ʹ2ਓ͚ͩͰܾΊͨͱ͍͏ͷ΋Α͘ͳ͔ͬͨɺͱ͍͏൓ল͔Β • ։ൃதͷमਖ਼͸͋Δఔ౓࢓ํͳ͍͕ɺස౓͕ଟ͗ͨ͢ • υϝΠϯ஌ࣝͷ͋ΔਓɺεΩʔϚઃܭܦݧऀΛؚΊͨνʔϜશһͱڞ༗͢Δ͜ͱ͕େࣄͩͱߟ͍͑ͯΔ
27. ©2019 Wantedly, Inc. ·ͱΊ
28. ©2019 Wantedly, Inc. ·ͱΊ • Nexus΍ApolloΛ࢖ͬͨίʔυੜ੒ɾܕੜ੒͸Ғେ • ܕ͕͋Δ͜ͱʹΑΓϑϩϯτΤϯυͷੜ࢈ੑ͸͕͍͋ͬͯ Δͱײ͍ͯ͡Δ • εΩʔϚϑΝʔετ։ൃ͸೉͍͠
29. ©2019 Wantedly, Inc. Thank You!