Allow debouncing reactive sources in `useFetch`/`useAsyncData`

[DamianGlowala]

Environment

n/a

Reproduction

n/a

Describe the bug

Would it be possible to integrate https://vueuse.org/shared/watchdebounced/#watchdebounced with the watch property of useFetch and useAsyncData, so that in addition to being able to pass an array of reactive sources, also make it possible to specify a debounce config for each of them? Currently, given the scenario of a user typing a search query, I cannot find a way to debounce it.

Additional context

No response

Logs

No response

[danielroe]

Would this be something you could implement yourself with a wrapper around useAsyncData, perhaps?

[DamianGlowala]

One of the workarounds is to create an intermediate, debounced and reactive source, as per below:

import { watchDebounced } from '@vueuse/core'

const searchQuery = ref('')
const debouncedSearchQuery = ref('')

watchDebounced(
  searchQuery,
  () => { debouncedSearchQuery.value = searchQuery.value },
  { debounce: 500, maxWait: 1000 },
)

... and then pass debouncedSearchQuery to the watch property of useFetch or useAsyncData.

If this is a recommended and desirable way to approach it, issue can be closed :)

[pi0]

Just an idea we could also have debouncedRef (either vueuse /cc @antfu or as a nuxt helper). Adding directly to the watch is probably overkill because we cannot tree-shake feature when not needed but seems a legitimate and common usage to have utility and docs for.

[stafyniaksacha]

Can be done with refDebounced from https://vueuse.org/shared/refDebounced/

import { refDebounced } from '@vueuse/core'

const input = ref('foo')
const debounced = refDebounced(input, 1000)