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
390
Wantedly のフロントエンド領域の取り組みと課題
chloe463
0
160
GraphQL Fragment Colocation の話
chloe463
2
1.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
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
190
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
12k
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
XP, Testing and ninja testing ZOZ5
m_seki
3
800
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
160
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
180
ソフトウェア設計の実践的な考え方
masuda220
PRO
4
630
CSC305 Lecture 06
javiergs
PRO
0
270
Vueのバリデーション、結局どれを選べばいい? ― 自作バリデーションの限界と、脱却までの道のり ― / Which Vue Validation Library Should We Really Use? The Limits of Self-Made Validation and How I Finally Moved On
neginasu
2
330
オープンソースソフトウェアへの解像度🔬
utam0k
17
3.1k
Catch Up: Go Style Guide Update
andpad
0
240
なぜGoのジェネリクスはこの形なのか? - Featherweight Goが明かす設計の核心
qualiarts
0
240
Featured
See All Featured
Balancing Empowerment & Direction
lara
5
700
A Modern Web Designer's Workflow
chriscoyier
697
190k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
55
3k
Optimising Largest Contentful Paint
csswizardry
37
3.5k
How to train your dragon (web standard)
notwaldorf
97
6.3k
Statistics for Hackers
jakevdp
799
220k
Build your cross-platform service in a week with App Engine
jlugia
232
18k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3.1k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
4 Signs Your Business is Dying
shpigford
185
22k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
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!