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
160
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
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
150
Introducing ReActionView: A new ActionView-compatible ERB Engine @ Rails World 2025, Amsterdam
marcoroth
0
710
チームのテスト力を鍛える
goyoki
3
890
Updates on MLS on Ruby (and maybe more)
sylph01
1
180
複雑なフォームに立ち向かう Next.js の技術選定
macchiitaka
2
220
アルテニア コンサル/ITエンジニア向け 採用ピッチ資料
altenir
0
110
2025 年のコーディングエージェントの現在地とエンジニアの仕事の変化について
azukiazusa1
24
12k
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
How Android Uses Data Structures Behind The Scenes
l2hyunwoo
0
480
テストカバレッジ100%を10年続けて得られた学びと品質
mottyzzz
2
610
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
スケールする組織の実現に向けた インナーソース育成術 - ISGT2025
teamlab
PRO
1
160
Featured
See All Featured
How To Stay Up To Date on Web Technology
chriscoyier
790
250k
How STYLIGHT went responsive
nonsquared
100
5.8k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.4k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
920
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
Optimising Largest Contentful Paint
csswizardry
37
3.4k
Building Applications with DynamoDB
mza
96
6.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
KATA
mclloyd
32
14k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
188
55k
Being A Developer After 40
akosma
90
590k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
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!