Pattern 2

Conditional Query with enabled

Use enabled: !!value to activate the query only when a condition is met. The query disables automatically when the input is empty.

const [search, setSearch] = useState('')
const [debouncedSearch] = useDebouncedValue(search, { wait: 300 })

const result = useQuery({
  queryKey: ['users', debouncedSearch],
  queryFn: () => fetchUsers(debouncedSearch),
  enabled: !!debouncedSearch,  // Only fetch when debounced value exists
})

Query is disabled (enabled: false)

Query State

isPending: trueisFetching: falseisLoading: falseisError: falseisSuccess: false
status: pendingfetchStatus: idle

Search to load users

Type a name, username, or email to enable the query.