@tanstack/react-query
https://gyazo.com/5e07d24632a77d0b937ab134c6f9d044
パフォーマンス
hooks
etc.
http クライアントを選ばない
記述量が少ない
Devtools がある
変わり過ぎや、しんど
1ページに30項目を出してるやつを個々でfetchしたい
そうすると30回requestが飛ぶことになる
どうすればいい?selectを使う以外にない?
cacheの中身を見たい
devtoolsで見れればいい
そこからデータを取りたいわけではない
理想的には、この辺の微妙な差異を表現したexampleをかければいい
APIは、今の時間を返す物があれば丁度いい
そもそもこの辺の理解が浅い場合にどこで問題になるのかすらあまり見えていない
devtoolを見ると割と理解の助けになる
userの入力後に、queryを無効にする
下書きの初期値はfetchするが、ユーザーがフォームになにか入力した以降はrefetchしないとか
rootで
これなんのためにやるん?
必須
devtoolで見れる
code:ts
const queryClient = new QueryClient();
function App() {
return (
<QueryClientProvider client={queryClient}>
<div style={{ margin: '2em' }}>
<h1>ユーザ情報</h1>
<User />
</div>
</QueryClientProvider>
);
}
Queries
Mutations
Query Invalidation
Getting Started
Overview
★Devtools
★GraphQL
Guides & Concepts
★Queries
★Query Functions
Parallel Queries
★Background Fetching Indicators
Disabling/Pausing Queries
Placeholder Query Data
refetchIntervalがあると、定期的にrefetchするが、「モーダルが開いているときは裏側ではrefetchさせない」とかができる、というやつのことかな?
Initial Query Data
★Prefetching
Query Invalidation
Invalidation from Mutations
Updates from Mutation Responses
Query Cancellation
Filters
Default Query Fn
Testing
★Does this replace Redux, MobX, etc?
Migrating to React Query 3
Community Resources
4: Status Checks in React Query
6: React Query and TypeScript
custom hooksの引数にoptionsを取りたい時にどういう型にするか知りたい
7: Using WebSockets with React Query
9: Placeholder and Initial Data in React Query
11: React Query Error Handling
13: Offline React Query
Plugins
persistQueryClient (Experimental)
createWebStoragePersistor (Experimental)
createAsyncStoragePersistor (Experimental)
broadcastQueryClient (Experimental)
API Reference
★QueryClientProvider
MutationCache
InfiniteQueryObserver
QueriesObserver
QueryErrorResetBoundary
focusManager
onlineManager
setLogger