id | title |
---|---|
disabling-queries |
Disabling/Pausing Queries |
If you ever want to disable a query from automatically running, you can use the enabled = false
option.
When enabled
is false
:
- If the query has cached data
- The query will be initialized in the
status === 'success'
orisSuccess
state.
- The query will be initialized in the
- If the query does not have cached data
- The query will start in the
status === 'idle'
orisIdle
state.
- The query will start in the
- The query will not automatically fetch on mount.
- The query will not automatically refetch in the background when new instances mount or new instances appearing
- The query will ignore query client
invalidateQueries
andrefetchQueries
calls that would normally result in the query refetching. refetch
can be used to manually trigger the query to fetch.
function Todos() {
const {
isIdle,
isLoading,
isError,
data,
error,
refetch,
isFetching,
} = useQuery(['todos'], fetchTodoList, {
enabled: false,
})
return (
<>
<button onClick={() => refetch()}>Fetch Todos</button>
{isIdle ? (
'Not ready...'
) : isLoading ? (
<span>Loading...</span>
) : isError ? (
<span>Error: {error.message}</span>
) : (
<>
<ul>
{data.map(todo => (
<li key={todo.id}>{todo.title}</li>
))}
</ul>
<div>{isFetching ? 'Fetching...' : null}</div>
</>
)}
</>
)
}