Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
GraphQLサーバーのスキーマファースト開発を半年経て
Tsuyoshi HARA
October 10, 2019
Programming
2
1.3k
GraphQLサーバーのスキーマファースト開発を半年経て
サービスのコア機能リニューアルの際に導入したGraphQLサーバーの開発を経て、スキーマファースト開発でよかったこと・困ったことをまとめました。
Tsuyoshi HARA
October 10, 2019
Tweet
Share
More Decks by Tsuyoshi HARA
See All by Tsuyoshi HARA
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
2.5k
Other Decks in Programming
See All in Programming
質とスピード(2022春版、質疑応答用資料付き) / Quality and Speed 2022 Spring Edition
twada
PRO
30
19k
WindowsコンテナDojo:第2回 Windowsコンテナアプリのビルド、公開、デプロイ
oniak3ibm
PRO
0
150
Nix for Scala folks
kubukoz
0
130
Jetpack Compose 頑張らないPreviewParameterProvider
horie23
0
110
Monadic Java
mariofusco
4
270
Cloud-Conference-Day-Spring Cloud + Spring Webflux: como desenvolver seu primeiro microsserviço reativo em Java?
kamilahsantos
1
150
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.2k
Git Rebase
bkuhlmann
7
1k
Microsoft Teams の 会議アプリ開発のはじめかた / How to start Microsoft Teams app development
karamem0
0
1.7k
Becoming an Android Librarian
skydoves
3
480
Micro Frontends with Module Federation: Beyond the Basics @codecrafts2022
manfredsteyer
PRO
0
130
TextPruner による大規模言語モデルの軽量化 / Large language model pruning using TextPruner
misawann
0
330
Featured
See All Featured
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
29
4.3k
Practical Orchestrator
shlominoach
178
8.6k
Documentation Writing (for coders)
carmenhchung
48
2.5k
Support Driven Design
roundedbygravity
86
8.5k
Visualization
eitanlees
124
11k
Code Reviewing Like a Champion
maltzj
506
37k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
37
3.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
100
5.9k
The World Runs on Bad Software
bkeepers
PRO
56
5.2k
For a Future-Friendly Web
brad_frost
164
7.4k
Bash Introduction
62gerente
596
210k
Ruby is Unlike a Banana
tanoku
91
9.2k
Transcript
©2019 Wantedly, Inc. GraphQLαʔόʔͷεΩʔϚϑΝʔετ։ൃΛܦͯ meguro.es @Wantedly, Inc 2019/10/10 Tsuyoshi Hara
©2019 Wantedly, Inc. Tsuyoshi Hara Frontend Engineer @Wantedly, Inc -
Visit Product Squad ʹॴଐ - ৽نػೳ։ൃɺطଘػೳͷϦχϡʔΞϧͳͲΛߦ͍ͬͯ·͢ɻ - ϑϩϯτΤϯυɾGraphQL αʔόʔͷ։ൃΛ͍ͯ͠·͢ - Twitter/Github: @chloe463
©2019 Wantedly, Inc. Table of contents 1. લఏࣝ (GraphQLʹ͍ͭͯ) 2.
͜͜ͷ Product Squad ͷऔΓΈ 3. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ
©2019 Wantedly, Inc. (SBQI2-ʹ͍ͭͯ
©2019 Wantedly, Inc. GraphQLΫΤϦݴޠ • API ͷͨΊͷΫΤϦݴޠ • σʔλͷܕ (Type)
Λఆٛ͢Δ͜ͱ͕Ͱ͖Δ • ಛఆͷσʔλϕʔεσʔλετΞʹґଘ͠ͳ͍ • σʔλͷऔಘ: Query • σʔλͷ࡞ɾߋ৽ɾআ: Mutation GraphQLʹ͍ͭͯ
©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ 4DIFNB 2VFSZ %BUB
©2019 Wantedly, Inc. GraphQLʹ͍ͭͯ ϦϨʔγϣϯΛ؆ܿʹهड़Ͱ͖Δ • ͋ΔϢʔβʔͷ friend ҰཡΛऔΓ͍ͨ߹ •
RESTful API ͷ߹࠷2ຊͷϦΫΤετ͕ඞཁ • /user/:id ͰϢʔβʔΛ1݅औಘ • /user/:id/friends Ͱ friend ϦετΛऔಘ • GraphQL ͷ߹ɺ1ͭͷ Query ͰղܾͰ͖Δ • ूͱͯ͠େ͍ʹྗΛൃشͰ͖Δ
©2019 Wantedly, Inc. ͜͜ͷ1SPEVDU4RVBEͷऔΓΈ
©2019 Wantedly, Inc. Wantedly Ͱ ϚΠΫϩαʔϏεԽΛਐΊ͍ͯ·͢
©2019 Wantedly, Inc. • طଘػೳͷେ෯ϦχϡʔΞϧΛ࣮ࢪத • ୈҰืू࡞ը໘ͷϦχϡʔΞϧ https://www.wantedly.com/companies/wantedly/post_articles/182854 • ϞϊϦγοΫͳRailsΞϓϦέʔγϣϯΛΓ่ͯ͠ϚΠΫϩαʔϏεԽ
• ݱࡏผػೳͷϦχϡʔΞϧΛ࣮ࢪத • BFF ͱͯ͠ GraphQL αʔόʔΛಋೖ • ૿͍͑ͯ͘όοΫΤϯυͷϚΠΫϩαʔϏεͷલஈʹ GraphQL αʔόʔΛઃஔ • ϑϩϯτΤϯυόοΫΤϯυͷϚΠΫϩαʔϏεΛҙࣝ͢Δ͜ͱͳ͘σʔλΛऔಘ͢Δ͜ͱ͕Ͱ͖ΔΑ͏ʹ ͜͜ͷऔΓΈ
©2019 Wantedly, Inc. εΩʔϚΛఆٛ͢Δͱ͜Ζ͔Β։ൃΛελʔτ • طଘػೳͷAPIͷϦΫΤετɾϨεϙϯεΛચ͍ग़͠ɺGraphQLͷεΩʔϚΛఆٛ • Resolver ࣮ͤͣɺͱΓ͋͑ͣϞοΫͷϨεϙϯεΛฦͤΔΑ͏ʹ •
ϞοΫΛฦͤΔ͜ͱͰϑϩϯτΤϯυόοΫΤϯυͷ࣮Λͨͣʹ࣮ΛਐΊΔ͜ͱ͕Ͱ͖ΔΑ͏ʹ GraphQL αʔόʔ։ൃ
©2019 Wantedly, Inc. NexusΛͬͯTypeScriptͷίʔυ͔ΒGraphQLͷεΩʔϚΛఆٛ • Nexus Λ͍ίʔυ͔ΒGraphQLͷεΩʔϚͱTypeScriptͷܕΛੜ • TypeScript ͷίʔυʹूதͰ͖
GraphQLͷܕͷੈքͱTypeScriptͷܕͷੈքΛߦ͖དྷ͢Δඞཁ͕ͳ͍ Nexus Λͬͨ GraphQL αʔόʔ։ൃ
©2019 Wantedly, Inc. Nexus Λͬͨ GraphQL αʔόʔ։ൃ NexusͰͷTypeఆٛ
©2019 Wantedly, Inc. Nexus Λͬͨ GraphQL αʔόʔ։ൃ NexusͰͷQueryఆٛ
©2019 Wantedly, Inc. Nexus Λͬͨ GraphQL αʔόʔ։ൃ ੜ͞ΕͨGraphQLͷεΩʔϚϑΝΠϧ
©2019 Wantedly, Inc. Nexus Λͬͨ GraphQL αʔόʔ։ൃ ੜ͞ΕͨTypeScriptͷܕ
©2019 Wantedly, Inc. Nexus Λͬͨ GraphQL αʔόʔ։ൃ
©2019 Wantedly, Inc. όοΫΤϯυ͔ΒϑϩϯτΤϯυ·Ͱ ܕใΛอ࣋
©2019 Wantedly, Inc. • APIఆ͔ٛΒΫϥΠΞϯτϑΝΠϧͱܕఆٛΛੜ • όοΫΤϯυαʔόͷ Swagger / .proto
͔Β open-api-generator / gRPC tools ΛͬͯΫϥΠΞϯτϑΝΠϧͱܕఆٛ ϑΝΠϧΛੜ • ϑϩϯτΤϯυͰ Apollo ΛͬͯܕఆٛΛੜ • GraphQL αʔόʔʹରͯ͠ Introspection ͱ͍͏λΠϓͷ Query ΛϦΫΤετ͢Δ͜ͱͰεΩʔϚใΛμϯϩʔυ͢ Δ͜ͱ͕Մೳ • εΩʔϚใͱιʔείʔυͷ Query / Mutation ͔ΒܕఆٛΛੜ ܕใͷอ࣋
©2019 Wantedly, Inc. ܕใͷอ࣋
©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱɾࠔͬͨ͜ͱ
©2019 Wantedly, Inc. Apollo ʹΑΓੜ͞ΕΔܕͷ͓͔͛Ͱ ϑϩϯτΤϯυͷੜ࢈ੑ্͕ͬͨ • MVP։ൃ࣌ɺ͡Ίʹ Presentational Component
Λ storybook Λͬͯେྔʹ։ൃ • Component ͕ἧͬͨͱ͜ΖͰ Container Component / GraphQL ͱͭͳ͗ࠐΈ • ࠷ॳ͔ΒܕใΛ͑ͨ͜ͱͰɺComponent ઃܭͳͲ͕͏·͍͖ͭ͘ͳ͗͜Έ1ਓͰ1.5ఔͰྃ • εΩʔϚ͕͋Γܕੜ͕Ͱ͖ͨ͜ͱͰɺணख͔Β2िؒ΄ͲͰMVPΛ։ൃ͢Δ͜ͱ͕Ͱ͖ͨ εΩʔϚϑΝʔετ։ൃͰΑ͔ͬͨ͜ͱ
©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ GraphQLαʔόʔͷ։ൃ͕ϘτϧωοΫʹ • ։ൃମ੍: ϑϩϯτΤϯυઐ1໊ /
ϑϩϯτΤϯυ + BFF 1໊ / BFF + όοΫΤϯυ 1໊ / όοΫΤϯυઐ1໊ • Ճ͑ͯɺ8݄9݄αϚʔΠϯλʔϯੜ (ϑϩϯτΤϯυ) ͕3໊ • MVP·Ͱͷ։ൃͱͯεϜʔζͩͬͨ • ͕ͩ͞ΒʹػೳΛՃͯ͘͠ஈ֊Ͱܕमਖ਼͕Կͱͳ͘ൃੜ • Πϯλʔϯੜ͕ͨͪΨϯΨϯ։ൃͯ͘͠ΕΔͷഥंΛ͔͚ͨ (خ͍͠൵໐) • ܕ͕मਖ਼͞Εͳ͍ͱϑϩϯτଆͰܕੜ͕Ͱ͖ͣͪঢ়ଶʹ
©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶃ ܕͷमਖ਼ϑϩϯτΤϯυResolver ͷ։ൃόοΫΤϯυ • ࣮ࡍϦΫΤετ͢ΔଆΛΑ͍ͬͯ͘ΔͷϑϩϯτΤϯυΤϯδχΞͱ͍͏͜ͱͰɺ Req/Res
ͷܕमਖ਼ϑϩϯτΤϯυΤϯδχΞ͕୲ • όοΫΤϯυͷϚΠΫϩαʔϏεαʔϏεͱܨ͙෦ (Resolver) όοΫΤϯυΤϯδχΞ͕୲ • ͜ΕʹΑΓϑϩϯτΤϯυଆ͕GraphQLαʔόʔͷमਖ਼Λͭ͜ͱͳ͘ਐΊΒΕΔΑ͏ʹͳͬͨ • ܕใ͑͋͞ΕϞοΫΛฦ͢͜ͱ͕Ͱ͖ɺApollo ʹΑΔܕੜͰ͖Δ
©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ܕͷमਖ਼ʹ͔͔Δίετ͕େ͖͍ • ։ൃ͔࣌ͩΒΧδϡΞϧʹσϓϩΠͰ͖͍ͯΔ͕ϦϦʔεͨ͋͠ͱͷมߋେม • มߋ͍ͨ͠ͷΛҰ୴
deprecated ʹ͠ɺ৽͍͠ field type ՃɺϑϩϯτଆΛमਖ਼ɺݹ͍ field Λআͱ͍ͬͨख ॱΛ౿Ήඞཁ͕͋Δ • ͏·͍͔͘ͳͯ͘ྑ͘ͳ໊͍લͷ Query ͕ੜ·Εͯ͠·ͬͨ (…V2 తͳ)
©2019 Wantedly, Inc. εΩʔϚϑΝʔετ։ൃͰࠔͬͨ͜ͱ ᶄ ։ൃॳظஈ֊ͰεΩʔϚΛܾΊ͖Δͷ͕͍͠ • ϦχϡʔΞϧͳͷͰɺطଘͷ API Λચ͍ग़͠εΩʔϚΛܾΊ͍ͯͬͨ
• ৽͍͠σβΠϯ্͕͕ΔલʹܾΊͨͷͰɺॳظʹܾΊ͍ͯͨͷͰରԠͰ͖ͳ͍ͷ͕Ͱ͖ͯͯ͠·ͬͨ • ࣍ճҎ߱ͷ TRY: νʔϜશһͰϨϏϡʔ͢ΔձΛ։͘ • ։ൃॳظஈ֊ʹ2ਓ͚ͩͰܾΊͨͱ͍͏ͷΑ͘ͳ͔ͬͨɺͱ͍͏ল͔Β • ։ൃதͷमਖ਼͋Δఔํͳ͍͕ɺස͕ଟ͗ͨ͢ • υϝΠϯࣝͷ͋ΔਓɺεΩʔϚઃܭܦݧऀΛؚΊͨνʔϜશһͱڞ༗͢Δ͜ͱ͕େࣄͩͱߟ͍͑ͯΔ
©2019 Wantedly, Inc. ·ͱΊ
©2019 Wantedly, Inc. ·ͱΊ • NexusApolloΛͬͨίʔυੜɾܕੜҒେ • ܕ͕͋Δ͜ͱʹΑΓϑϩϯτΤϯυͷੜ࢈ੑ͕͍͋ͬͯ Δͱײ͍ͯ͡Δ •
εΩʔϚϑΝʔετ։ൃ͍͠
©2019 Wantedly, Inc. Thank You!