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
2.4k
ReactとGraphQLで実現する宣言的データフェッチ
KazukiHayase
October 28, 2022
Tweet
Share
More Decks by KazukiHayase
See All by KazukiHayase
GraphQLクライアントの技術選定 2023冬
kazukihayase
8
4.7k
Introduction and Insights of the Hasura-based Architecture
kazukihayase
0
670
自分だけが頑張るのをやめて、フルスタックなチームを作る
kazukihayase
2
1.7k
Goでテンプレートからファイルを自動生成するCLIを作る
kazukihayase
0
250
生産性が上がり続けるチームを作るための第一歩
kazukihayase
4
3.4k
GraphQLにおけるクライアントキャッシュ戦略
kazukihayase
0
2k
MUIをベースにしたデザインシステムの構築
kazukihayase
0
320
Hasuraを活用するためのTips集
kazukihayase
0
30k
Contaienr/Presentationalパターン再入門
kazukihayase
0
14k
Other Decks in Technology
See All in Technology
#phpconkagawa レガシーコードにもオブザーバビリティを 〜少しずつ始めるサービス監視〜
yamato_sorariku
0
510
技術力の伸ばし方を考える
khirata
0
140
TypescriptでのContextualな構造化ロギングと社内全体への導入
leveragestech
3
550
能動学習のいろは:書籍「Human-in-the-Loop機械学習」3〜5章
hiroyoshiito
0
290
AWS アーキテクチャ作図入門/aws-architecture-diagram-101
ma2shita
16
6.7k
令和版ソフトウェアエンジニアの情報収集術 PHPカンファレンス香川2024
ysknsid25
4
840
グイグイ系QAエンジニアでやっていくよ!
____rina____
0
720
Dungeons and Dragons and Rails
joelq
0
220
Real World Type Puzzle and Code Generation
yukukotani
4
620
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
280
Prisma ORMを2年運用して培ったノウハウを共有する
tockn
19
4.9k
ハードウェアを動かすTypeScriptの世界
9wick
3
1.2k
Featured
See All Featured
The MySQL Ecosystem @ GitHub 2015
samlambert
244
12k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
GraphQLの誤解/rethinking-graphql
sonatard
56
9.3k
What the flash - Photography Introduction
edds
64
11k
Building Better People: How to give real-time feedback that sticks.
wjessup
356
18k
Practical Orchestrator
shlominoach
183
9.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
81
44k
GitHub's CSS Performance
jonrohan
1025
450k
Mobile First: as difficult as doing things right
swwweet
217
8.6k
Fontdeck: Realign not Redesign
paulrobertlloyd
76
4.9k
Unsuck your backbone
ammeep
664
57k
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
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Λਪਐ͍ͯ͘͠ ΤϯδχΞΛืू͍ͯ͠·͢ όΠηϧ ΤϯδχΞ࠾༻