useQueryのOptions

基本

queryKey

queryFn (context: QueryFunctionContext) => Promise<TData>

refetch系

refetchとは？

refetchInterval

(focusとか関係なく)定期的にrefetchする間隔を指定

default: false

refetchIntervalInBackground: booelan

refetchOnMount: boolean | "always"

Defaults to true

If set to true, the query will refetch on mount if the data is stale.

If set to false, the query will not refetch on mount.

If set to "always", the query will always refetch on mount.

refetchOnWindowFocus: boolean | "always"

Defaults to true

focusした時にrefetchするかどうか

Optional

Defaults to true

If set to true, the query will refetch on reconnect if the data is stale.

If set to false, the query will not refetch on reconnect.

If set to "always", the query will always refetch on reconnect.

cache系

retry系

retry

errorが返った時に、retryするかどうかを指定する

If set to false, the query will not be retried on mount if it contains an error. Defaults to true.

retryDelay

retryする間隔を指定する

毎回同じ感覚にもできるし、徐々に長くすることもできる

select: (data: TData) => unknown

いわゆるselectorで、返り値を見てrenderingするかどうかを決定する

RESTを使っていて、responseの一部のみを使用する際に使える

selectの返り値が異なっていれば再renderingする

notifyOnChangeProps: string[] | "tracked"

ここで指定したものの値に変更があった場合にのみ再renderingする

code:ts

const { data, isFetching } = useQuery(key, fn, {

notifyOnChangeProps: 'tracked'

})

notifyOnChangePropsExclusions: string[]

指定したものに変更があっても再renderingさせない

その他

enabled

Dependent Queriesする時に便利

2つのqueryがある時に、

Optional

If specified, this function is used to hash the queryKey to a string.

Callback

onSuccess: (data: TData) => void

queryを正常に取得して、cacheが更新されたときに実行される

This function will fire any time the query successfully fetches new data or the cache is updated via setQueryData.

onError: (error: TError) => void

Optional

This function will fire if the query encounters an error and will be passed the error.

onSettled: (data?: TData, error?: TError) => void

successしたときも、errorしたときも実行される

Optional

Set this to true to enable suspense mode.

When true, useQuery will suspend when status === 'loading'

When true, useQuery will throw runtime errors when status === 'error'

Defaults to the global query config's useErrorBoundary value, which is undefined

Set this to true if you want errors to be thrown in the render phase and propagate to the nearest error boundary

Set this to false to disable suspense's default behavior of throwing errors to the error boundary.

If set to a function, it will be passed the error and should return a boolean indicating whether to show the error in an error boundary (true) or return the error as state (false)

Optional

If set, this value will be used as the initial data for the query cache (as long as the query hasn't been created or cached yet)

If set to a function, the function will be called once during the shared/root query initialization, and be expected to synchronously return the initialData

Initial data is considered stale by default unless a staleTime has been set.

initialData is persisted to the cache

Optional

If set, this value will be used as the time (in milliseconds) of when the initialData itself was last updated.

placeholderData: TData | () => TData

Optional

If set, this value will be used as the placeholder data for this particular query observer while the query is still in the loading data and no initialData has been provided.

placeholderData is not persisted to the cache

Optional

Defaults to true

If set to false, structural sharing between query results will be disabled.

Optional

If set, stores additional information on the query cache entry that can be used as needed. It will be accessible wherever the query is available, and is also part of the QueryFunctionContext provided to the queryFn.