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
3.9k
ReactとGraphQLで実現する宣言的データフェッチ
KazukiHayase
October 28, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
CIでのgolangci-lintの実行を約90%削減した話
kazukihayase
0
350
もし今からGraphQLを採用するなら
kazukihayase
12
5.2k
Goでテストをしやすくするためにやったこと
kazukihayase
1
820
GraphQLクライアントの技術選定 2023冬
kazukihayase
9
7k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
960
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
3.2k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
1.3k
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.8k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
3.1k
Other Decks in Technology
See All in Technology
ObsidianをMCP連携させてみる
ttnyt8701
2
140
白金鉱業Meetup_Vol.19_PoCはデモで語れ!顧客の本音とインサイトを引き出すソリューション構築
brainpadpr
2
490
GeminiとNotebookLMによる金融実務の業務革新
abenben
0
170
米国国防総省のDevSecOpsライフサイクルをAWSのセキュリティサービスとOSSで実現
syoshie
2
840
ユーザーのプロフィールデータを活用した推薦精度向上の取り組み
yudai00
0
490
Claude Code Actionを使ったコード品質改善の取り組み
potix2
PRO
4
1.8k
Navigation3でViewModelにデータを渡す方法
mikanichinose
0
210
Witchcraft for Memory
pocke
0
110
Microsoft Build 2025 技術/製品動向 for Microsoft Startup Tech Community
torumakabe
2
220
新卒3年目の後悔〜機械学習モデルジョブの運用を頑張った話〜
kameitomohiro
0
400
Create a Rails8 responsive app with Gemini and RubyLLM
palladius
0
140
SalesforceArchitectGroupOsaka#20_CNX'25_Report
atomica7sei
0
100
Featured
See All Featured
Unsuck your backbone
ammeep
671
58k
The Straight Up "How To Draw Better" Workshop
denniskardys
233
140k
The Cult of Friendly URLs
andyhume
79
6.4k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
228
22k
A Modern Web Designer's Workflow
chriscoyier
693
190k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
124
52k
Typedesign – Prime Four
hannesfritz
42
2.7k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Six Lessons from altMBA
skipperchong
28
3.8k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
7
700
Practical Orchestrator
shlominoach
188
11k
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Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻