Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
JSConf JP 2022 introduce React Query
South
November 26, 2022
Programming
2
5.5k
JSConf JP 2022 introduce React Query
South
November 26, 2022
Tweet
Share
More Decks by South
See All by South
Front-end rearchitect SPA
maminami373
0
190
JSConf jp 2021 kaonavi front-end development in the monolithic service
maminami373
1
60
単体テストゼロからテスト文化を醸成させた話 / Fostering the testing culture
maminami373
0
1.1k
Other Decks in Programming
See All in Programming
エンジニア向け会社紹介資料/engineer-recruiting-pitch
xmile
PRO
0
100
SwiftPMのPlugin入門 / introduction_to_swiftpm_plugin
uhooi
2
110
Ruby Pattern Matching
bkuhlmann
0
610
tidy_rpart
bk_18
0
600
xarray-Datatree: Hierarchical Data Structures for Multi-Model Science
tomnicholas
0
220
Refactor with using `available` and `deprecated`
417_72ki
3
380
Form実装基本を学び直してみた
hyugatsukui
0
240
あなたと 「|」 したい・・・
track3jyo
PRO
2
1.1k
WordPress(再)入門 - 基礎知識・環境編
oleindesign
1
140
Milestoner
bkuhlmann
1
250
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
120
TSX First な Zero-Runtime SSG potato4d/dodai とその仕組み / owned static site generator #kyotojs
potato4d
0
330
Featured
See All Featured
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
38
3.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
15
1.2k
Producing Creativity
orderedlist
PRO
335
38k
Testing 201, or: Great Expectations
jmmastey
25
5.7k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
Fashionably flexible responsive web design (full day workshop)
malarkey
396
63k
A better future with KSS
kneath
230
16k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
KATA
mclloyd
12
9.7k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
24
4.6k
The Language of Interfaces
destraynor
149
21k
Pencils Down: Stop Designing & Start Developing
hursman
114
10k
Transcript
React Query 導入と 実装ルールについて考える 2022.11.26 JSConf JP 2022 | 株式会社カオナビ
Yuuki Minami © kaonavi, inc.
© kaonavi, inc. 2 • Yuuki Minami • CTO 室
フロントエンド支援チーム • 🍜🍺❤
React Query の導入時に得られた知見や 実装について考えたこと 話すこと © kaonavi, inc. 3
INDEX 1 .React Query について 2 .React Query 導入と選定 3
.実装ルール・実装例 4 .React Query の近時 © kaonavi, inc. 4 5 .まとめ
React Query について © kaonavi, inc. 5
React Query (TanStack Query) © kaonavi, inc. 6 • 非同期状態管理ライブラリ
◦ データ取得 ◦ サーバーデータ (API レスポンス) のキャッシュ • v4 から TanStack Query へ名称変更 ◦ React, Solid, Vue に対応 (2022年11月時点)
React Query の特徴 © kaonavi, inc. 7 • stale-while-revalidate キャッシュ戦略
• 同一データ取得リクエストの重複削除 • garbage collection の設定 • structural sharing による Query 結果のメモ化 • バックグラウンドでのデータ更新 • Suspense モード
useQuery Component がレンダリングされるとキャッシュが有効であれ ばキャッシュされたデータを返し、キャッシュが存在しない場 合やキャッシュの状態が Stale の時はデータをフェッチする。 • queryKey: キャッシュ管理のための
一意なキー • queryFn: データ取得のための Promise を返す関数 基本的な使い方 © kaonavi, inc. 8
React Query 導入と選定 © kaonavi, inc. 9
• 一部のページで MPA -> SPA へ移行 • 歴史的背景 ◦ Redux
Store がページ毎に存在 (Not single store) • SPA で Redux 以外の Global State 共有のアプローチが必要 • SPA 化によりキャッシュ活用の機運が高まる • Redux 実装が肥大化しがちでつらい 導入のモチベーション © kaonavi, inc. 10
• React Query ◦ 自動 garbage collection 👍 ◦ 公式
Devtools 👍 ◦ 開発の勢いとリリースサイクルの早さ 👍 • SWR ◦ シンプル・必要最低限の機能はある ◦ サイズが小さい • RTK Query ◦ 歴史的背景から Redux (RTK) がシングルストアではない ◦ Redux にロックイン 他の候補との比較と導入の決め手 © kaonavi, inc. 11
Stale Time • Query を fresh から stale へ移行す るまでの時間
• fresh の間はデータは常にキャッシュ から取得され、リクエストが走ることは ない • stale の場合、キャッシュを返しつつ バックグラウンドで再取得とデータ更 新が可能 React Query Concepts © kaonavi, inc. 12 • 非アクティブな Query のキャッシュを 削除 (GC) するまでの時間 • Observer (その Query を利用するコ ンポーネント) が全て unmount される と Query は非アクティブに移行 Cache Time © kaonavi, inc. 12
React Query Devtools • Query 毎にキャッシュされているデータが確 認可能 • Query の状態が把握でき、ボタンからデータ
の再取得やキャッシュの破棄も可能 • オプトインなので利用する際は本体と別にイ ンストール • development build でのみ有効化される
TanStack/query 開発とリリース © kaonavi, inc. 14 https://github.com/TanStack/query/pulse/monthly © kaonavi, inc.
14
TanStack/query 開発とリリース https://www.npmjs.com/package/@tanstack/react-query?activeTab=versions © kaonavi, inc. • Opened issues: 18
(資料作成時点) • Feature Requests & Questions は Discussions • Issue の修正が早い • リリース頻度が高い ので修正がマージされたらす ぐに取り込める 15
Comparison Matrix © kaonavi, inc. 16 https://tanstack.com/query/v4/docs/comparison
Redux は不要になるか? © kaonavi, inc. 17 • API レスポンス以外の Global
State を React Context 等に寄せることで場合によっては不要 ◦ Context でレンダリングを最適化するには Context を適宜分割し、複数の Provider を用意 する必要がある • 複雑な要件に対応させるために API レスポンス以外にも様々な Global State を管理 • レンダリング最適化や可読性の観点から、 Redux は引き続き有用と考える
実装ルール・実装例 © kaonavi, inc. 18
Custom Hooks © kaonavi, inc. 19 • Query 毎に Custom
Hooks で抽象化し、可搬性・ 保守性の向上 • Component から直接 useQuery を呼ばない • コアメンテナ Dominik 氏のブログでも推奨 ◦ https://tkdodo.eu/blog/practical-react-query ※v5では useQuery の引数は単一のオブジェクトのみ許容に
Query Keys © kaonavi, inc. 20 • 一意性を担保するためにルールを設定 • common
or features ◦ common: 省略 ◦ features: feature 名を含める • Hooks name ◦ useFoo の foo を含める • Custom Hooks ファイル内で定義 ◦ 利用する Query Keys を間違えない ◦ コンフリクトしない
useQuery options type • useQuery に options を渡すことが可能 • Custom
Hooks の引数で options を受け取る • select option による取得データの加工 ◦ select で取得されるデータに変更があっ た場合のみ再レンダリング ◦ 型推論させるために工夫が必要 ◦ 最適解求む! © kaonavi, inc. 21
React Query の近時 © kaonavi, inc. 22
ESLint Plugin © kaonavi, inc. 23 • v4.14.0で追加 • @tanstack/query/exhaustive-deps
◦ queryFn 内で利用するパラメータは queryKey に指 定する • @tanstack/query/prefer-query-object-syntax ◦ useQuery の引数は単一のオブジェクトのみ許容
suspense for useQueries © kaonavi, inc. 24 • v4.15.0で useQueries
が suspense モードに対 応 (experimental とのこと) • 全ての Query の取得が完了するまでコンポー ネントツリーはマウントせずに fallback • Issue が報告されてから約 2年越しに解決 🎉 • 通常の useQuery の suspense モードでは ウォーターフォール的にしか実行できない
• useQuery の引数は単一のオブジェクトのみ許容 • require React >=18.2.0 • require TypeScript
>=4.7 • rename cacheTime to gcTime • rename useErrorBoundary to throwError • Optional chaining のトランスパイル廃止によるバンドルサイズ改善 v5 Roadmap © kaonavi, inc. 25 現在ドラフト https://github.com/TanStack/query/discussions/4252
まとめ © kaonavi, inc. 26
まとめ © kaonavi, inc. 27 • React Query はプロダクトで活躍できるポテンシャルがある ◦
痒いところに手が届く API や Options ◦ Devtools や ESLint Plugin による開発者体験 ◦ 開発の勢い • 実装のルールはしっかり考えないと破綻する可能性あり (特に Query Keys) • Stale Time と Cache Time の概念だけ最初は少々戸惑いがち ◦ 実際に手元で動かして理解するのが一番 • 開発が早く、検索した情報が古くなっている可能性があるので公式ドキュメントと照らし合 わせる