Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
GraphQLサーバーのスキーマファースト開発を半年経て
Search
Tsuyoshi HARA
October 10, 2019
Programming
2
2.5k
GraphQLサーバーのスキーマファースト開発を半年経て
サービスのコア機能リニューアルの際に導入したGraphQLサーバーの開発を経て、スキーマファースト開発でよかったこと・困ったことをまとめました。
Tsuyoshi HARA
October 10, 2019
Tweet
Share
More Decks by Tsuyoshi HARA
See All by Tsuyoshi HARA
Design System Guild の1年を振り返る
chloe463
0
130
スキーマ駆動で加速するフロントエンド開発
chloe463
0
370
Wantedly のフロントエンド領域の取り組みと課題
chloe463
0
150
GraphQL Fragment Colocation の話
chloe463
2
1k
デザインシステム仕切り直し
chloe463
1
3.1k
Wantedlyのフロントエンド領域の取り組みと課題
chloe463
0
8.2k
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
4k
Other Decks in Programming
See All in Programming
Honoアップデート 2025年夏
yusukebe
1
890
ProxyによるWindow間RPC機構の構築
syumai
1
250
速いWebフレームワークを作る
yusukebe
3
1.5k
AIコーディングAgentとの向き合い方
eycjur
0
250
時間軸から考えるTerraformを使う理由と留意点
fufuhu
8
3.1k
SOCI Index Manifest v2が出たので調べてみた / Introduction to SOCI Index Manifest v2
tkikuc
1
120
RDoc meets YARD
okuramasafumi
4
160
個人軟體時代
ethanhuang13
0
280
Oracle Database Technology Night 92 Database Connection control FAN-AC
oracle4engineer
PRO
1
360
コンテキストエンジニアリング Cursor編
kinopeee
1
740
パッケージ設計の黒魔術/Kyoto.go#63
lufia
3
390
AI時代のドメイン駆動設計-DDD実践におけるAI活用のあり方 / ddd-in-ai-era
minodriven
25
9.6k
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
26
1.9k
Documentation Writing (for coders)
carmenintech
73
5k
BBQ
matthewcrist
89
9.8k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.5k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
31
2.2k
4 Signs Your Business is Dying
shpigford
184
22k
The Power of CSS Pseudo Elements
geoffreycrofte
77
5.9k
Music & Morning Musume
bryan
46
6.8k
Scaling GitHub
holman
463
140k
YesSQL, Process and Tooling at Scale
rocio
173
14k
A Tale of Four Properties
chriscoyier
160
23k
RailsConf 2023
tenderlove
30
1.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!