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.4k
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
64
スキーマ駆動で加速するフロントエンド開発
chloe463
0
250
Wantedly のフロントエンド領域の取り組みと課題
chloe463
0
95
GraphQL Fragment Colocation の話
chloe463
2
860
デザインシステム仕切り直し
chloe463
1
2.9k
Wantedlyのフロントエンド領域の取り組みと課題
chloe463
0
7.9k
5分でできる生産性改善~ESLint Custom Rule を作ろう~
chloe463
0
3.8k
Other Decks in Programming
See All in Programming
コミュニティ駆動 AWS CDK ライブラリ「Open Constructs Library」 / community-cdk-library
gotok365
2
180
Amazon S3 TablesとAmazon S3 Metadataを触ってみた / 20250201-jawsug-tochigi-s3tables-s3metadata
kasacchiful
0
180
Honoをフロントエンドで使う 3つのやり方
yusukebe
7
3.4k
PHP ステートレス VS ステートフル 状態管理と並行性 / php-stateless-stateful
ytake
0
110
『テスト書いた方が開発が早いじゃん』を解き明かす #phpcon_nagoya
o0h
PRO
6
1.9k
Visual StudioのGitHub Copilotでいろいろやってみる
tomokusaba
1
180
バックエンドのためのアプリ内課金入門 (サブスク編)
qnighy
8
1.8k
SpringBoot3.4の構造化ログ #kanjava
irof
3
1k
PHPのバージョンアップ時にも役立ったAST
matsuo_atsushi
0
170
さいきょうのレイヤードアーキテクチャについて考えてみた
yahiru
3
760
メンテが命: PHPフレームワークのコンテナ化とアップグレード戦略
shunta27
0
190
GoとPHPのインターフェイスの違い
shimabox
2
200
Featured
See All Featured
Rebuilding a faster, lazier Slack
samanthasiow
80
8.8k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
2.1k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
7
630
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.6k
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Scaling GitHub
holman
459
140k
Visualization
eitanlees
146
15k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
160
15k
Unsuck your backbone
ammeep
669
57k
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!