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
ReactとGraphQLで実現する宣言的データフェッチ
Search
KazukiHayase
October 28, 2022
Technology
1
4k
ReactとGraphQLで実現する宣言的データフェッチ
KazukiHayase
October 28, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
470
もし今からGraphQLを採用するなら
kazukihayase
13
5.4k
Goでテストをしやすくするためにやったこと
kazukihayase
1
830
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7.2k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
1k
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.3k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.4k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.3k
Other Decks in Technology
See All in Technology
DuckDB-Wasmを使って ブラウザ上でRDBMSを動かす
hacusk
1
140
MCPで変わる Amebaデザインシステム「Spindle」の開発
spindle
PRO
3
2.8k
Grafana Meetup Japan Vol. 6
kaedemalu
1
200
Webブラウザ向け動画配信プレイヤーの 大規模リプレイスから得た知見と学び
yud0uhu
0
210
iPhone Eye Tracking機能から学ぶやさしいアクセシビリティ
fujiyamaorange
0
630
エニグモ_会社紹介資料(エンジニア職種向け).pdf
enigmo_hr
0
2.2k
【 LLMエンジニアがヒューマノイド開発に挑んでみた 】 - 第104回 Machine Learning 15minutes! Hybrid
soneo1127
0
290
「何となくテストする」を卒業するためにプロダクトが動く仕組みを理解しよう
kawabeaver
0
170
落ちる 落ちるよ サーバーは落ちる
suehiromasatoshi
0
140
ZOZOマッチのアーキテクチャと技術構成
zozotech
PRO
3
1.3k
AIのグローバルトレンド2025 #scrummikawa / global ai trend
kyonmm
PRO
1
230
役割は変わっても、変わらないもの 〜スクラムマスターからEMへの転身で学んだ信頼構築の本質〜 / How to build trust
shinop
0
160
Featured
See All Featured
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
285
13k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
51
5.6k
How to Ace a Technical Interview
jacobian
279
23k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
910
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
48
9.7k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
Building an army of robots
kneath
306
46k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
49
3k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
840
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Transcript
ReactͱGraphQLͰ࣮ݱ͢Δ એݴతσʔλϑΣον 2022.10.27 ReactΛͬͱޠΓ͍ͨʂ
ࣗݾհ ˕ 20214݄ Buysell Technologiesೖࣾ ˕ ϑϩϯτΤϯυΤϯδχΞ ˕ React /
TypeScript / Go / GraphQ L ˕ झຯ ◦ ϚϯΨɺݸਓ։ൃ 2 ૣ ً
ΞδΣϯμ ˕ GraphQL ˕ Fragment Colocation ˕ ·ͱΊ 3
1 . GraphQL 4
GraphQLͱ ˕ Web APIͷن֨ ˕ APIͷ༷ΛεΩʔϚݴޠͰఆٛ ˕ ΫΤϦݴޠʹΑͬͯσʔλΛऔಘ 5
GraphQLͰͷAPI௨৴ͷྫ 6 Ҿ༻ɿhttps://hasura.io/learn/graphql/intro-graphql/what-is-graphql/
7 GraphQLͷجຊߏจ 7 Quer y ˕ σʔλΛऔಘ͢ΔͨΊͷߏจ ˕ RESTͷGETʹ૬ ˕
QueryͱϨεϙϯεͷߏ͕Ұக
8 Queryͷྫ 8 ࢦఆͨ͠ϑΟʔϧυͷΈϨεϙϯεʹؚ·ΕΔ
9 GraphQLͷجຊߏจ 9 Fragmen t ˕ ϑΟʔϧυͷू߹Λఆٛ͢Δߏจ ˕ QueryͷதͰల։ͯ͠༻ ˕
σʔλऔಘࣗମQuery͕ߦ͏
GraphQLͷಛ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 10
GraphQLͷಛ ˕ ୯ҰͷΤϯυϙΠϯτ ˕ σʔλϑΣονͷॊೈੑ ˕ ڧྗͳΤίγεςϜ 11
GraphQLΛ͏͜ͱͰ ඞཁͳσʔλͷΈΛཉ͍͠ܗͰऔಘͰ͖Δ 12
ReactͷએݴతUIͱ૬ੑ͕͍͍ UIσʔλཁ݅એݴతʹѻ͑Δ 13
2 . Fragment Colocation 14
Fragment Colocationͱ ˕ UIͱσʔλཁ݅ΛηοτͰཧ͢Δͱ͍͏ߟ͑ํ ˕ ComponentͰ༻͢ΔσʔλΛFragmentͰఆٛ͢ Δ ˕ Meta(چFacebook)Ͱ࠾༻͞Ε͍ͯΔ 15
16 Ϣʔβʔϖʔδͷྫ 16 ˕ Ϣʔβʔใ ˕ ϢʔβʔͷλεΫҰཡ
17 Componentͷ֊ߏ 17 ˕ UserPag e ◦ UserInf o ◦
TaskList UserPage UserInfo TaskList
UserInfo 18 UserPage UserInfo TaskList
UserInfo 19 UserPage UserInfo TaskList Fragmentఆٛ
UserInfo 20 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
TaskList 21 UserPage UserInfo TaskList
TaskList 22 UserPage UserInfo TaskList Fragmentఆٛ FragmentͰఆٛͨ͠σʔλΛhookͰऔಘ
UserPage 23 UserPage UserInfo TaskList
UserPage 24 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ
UserPage 25 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ
UserPage 26 UserPage UserInfo TaskList FragmentΛ·ͱΊͨQueryΛఆٛ hookͰQuery࣮ߦ QueryͰऔಘͨ͠σʔλ ΛࢠComponentʹ͢
શମ૾ 27 TaskList UserPage UserInfo ComponentͱGraphQLͷ֊ߏ͕Ұக
Fragment ColocationͷϝϦοτ σʔλཁؚ݅Ίͯ ComponentΛΧϓηϧԽͰ͖Δ 28
࠶ར༻͕Մೳ ͷComponentͰߦ͍ͬͯ Δͷσʔλཁ݅ͷએݴͷΈ Ͱɺσʔλͷऔಘߦ͍ͬͯ ͳ͍ͷͰෳͷComponent ͔Βར༻͕Մೳ σʔλཁؚ݅ΊͨComponentͷΧϓηϧԽ Өڹൣғ͕ด͍ͯ͡Δ ͷComponentʹमਖ਼Λ Ճ͑ͯݺͼग़͠ݩͷ
Componentमਖ਼ෆཁ 29
30 Ϣʔβʔϖʔδͷྫ 30 ˕ Ϣʔβʔใʹ߲ΛՃ ˕ λεΫҰཡʹมߋͳ͠ ߲ΛՃ
31 UserInfoͷ࣮ 31 ˕ FragmentʹϑΟʔϧυΛՃ ˕ ද߲ࣔΛՃ ˕ Propsͷมߋͳ͠ Ճ
Ճ
32 UserPageͷ࣮ 32 ˕ มߋՕॴͳ͠ ˕ ࢠComponentͷมߋ͕ ComponentʹӨڹ͍ͯ͠ͳ͍
3 . ·ͱΊ 33
·ͱΊ ˕ GraphQLͰσʔλϑΣον͕ॊೈʹߦ͑Δ ˕ ComponentͰඞཁͳσʔλΛFragmentͰએݴతʹ ఆٛͰ͖Δ ˕ ComponentͱFragmentΛηοτͰཧ͢Δ͜ͱͰ σʔλཁؚ݅ΊͯΧϓηϧԽͰ͖Δ 34
35 XFBSFIJSJOH όΠηϧͰ ϦϢʔεۀքͷ%9Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻