react-queryのquery
docsとかでqueryと呼ばれているものはこれのこと
これを直接的に説明している部分を見かけなかったので混乱したmrsekut.icon
@tanstack/react-queryの中心的な概念であるので、これを理解していないと色々誤解する
「1回分のrequest」のようなイメージ
同じuseQueryのkeyからでも、複数のqueryが生成される
例えば、
0:00にhogeというkeyでserverにrequestを送って、
0:05に再びhogeというkeyでserverにrequestを送った時、
これらは別々のqueryになる
queryこそが、cacheされる対象である
react-queryでcacheされる対象はdataではなくqueryである
queryは、状態を持つ
この理解合ってる #??
実装とか、根拠も見たい
queryが生成されるタイミングでrequestが送られる
逆に言えば、それ以外のタイミングではserverにrequestが送られることはない
逆に、queryが生成されるタイミングでは、絶対にrequestが送られる
The duration until a query transitions from fresh to stale. As long as the query is fresh, data will always be read from the cache only - no network request will happen! If the query is stale (which per default is: instantly), you will still get data from the cache, but a background refetch can happen under certain conditions. ref
この説明があってるなら、この理解で合ってる
一度inactiveになると、それはもう死ぬ運命しか無い
inactive→activeになったように見えるのは、新しいqueryが生成されているから
このタイミングでrequestも送られている
実装(src/core/query.ts)を見てみる
code:ts
class Query<
TQueryFnData = unknown,
TError = unknown,
TData = TQueryFnData,
TQueryKey extends QueryKey = QueryKey
{
queryKey: TQueryKey
queryHash: string
options!: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
initialState: QueryState<TData, TError>
revertState?: QueryState<TData, TError>
state: QueryState<TData, TError>
cacheTime!: number
meta: QueryMeta | undefined
private cache: QueryCache
private promise?: Promise<TData>
private gcTimeout?: number
private retryer?: Retryer<TData, TError>
private observers: QueryObserver<any, any, any, any, any>[]
private defaultOptions?: QueryOptions<TQueryFnData, TError, TData, TQueryKey>
private abortSignalConsumed: boolean
private hadObservers: boolean
...
queryKeyは、useQueryのkeyのことだろう
cacheTimeは、queryをcacheに保持する時間
optionsで指定しているものと同じ
QueryStateという型のstateを持っている
ここから、queryは状態を持つことがわかる
QueryStateはどのようなものか
code:ts
interface QueryState<TData = unknown, TError = unknown> {
data: TData | undefined
dataUpdateCount: number
dataUpdatedAt: number
error: TError | null
errorUpdateCount: number
errorUpdatedAt: number
fetchFailureCount: number
fetchMeta: any
isFetching: boolean
isInvalidated: boolean
isPaused: boolean
status: QueryStatus
}
TData型のdataがある
これはuseQueryのOptionsでも出現する型だmrsekut.icon
queryを実行して得られたdataがここに入ることがわかる
QueryStatus型のstatusも持っている
code:ts
type QueryStatus = 'idle' | 'loading' | 'error' | 'success'
ReactQueryDevtoolsで確認できる状態は、「Queryの状態」であることがわかるmrsekut.icon
これは別物だな