N
Nuxt•4mo ago
enti

useFetch() and watch reactivity

I got a lack of reactivity on a useLazyFetch call: 
// lazy fetching, but doesn't refresh automatically on its reactive sources from query part
const { refresh } = useLazyFetch(
  () => `/api/*********`,
  {
    query: {
      id: destination.id,    // ref
      dateDebut: startDate,  // computed
      dateFin: endDate,      // computed
      lang: locale,          // ref
    },
    immediate: false,
    // either I input watchers manually or not here, doesn't trigger when sources change
    watch: [destination.id, dateFin, locale],
  },
)

// but adding my own watchers work
watch(
  () => [destination.id.value, dateRange.value.end, locale.value],
  () => {
    refresh()
  },
)
// lazy fetching, but doesn't refresh automatically on its reactive sources from query part
const { refresh } = useLazyFetch(
  () => `/api/*********`,
  {
    query: {
      id: destination.id,    // ref
      dateDebut: startDate,  // computed
      dateFin: endDate,      // computed
      lang: locale,          // ref
    },
    immediate: false,
    // either I input watchers manually or not here, doesn't trigger when sources change
    watch: [destination.id, dateFin, locale],
  },
)

// but adding my own watchers work
watch(
  () => [destination.id.value, dateRange.value.end, locale.value],
  () => {
    refresh()
  },
)
How come my manual watch() works but the reactive sources in query won't trigger another fetching?
2 Replies
kapa.ai
kapa.ai•4mo ago
Hi @enti. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The behavior you're seeing is due to how Nuxt's useFetch and useLazyFetch handle reactivity with their options, especially when using immediate: false. Key points from the documentation: - When you provide reactive values (like refs or computeds) in the query option, Nuxt will automatically watch those and refetch when they change—but only if immediate is true (the default). If you set immediate: false, Nuxt will not fetch automatically on changes to the reactive sources unless the data has already been fetched once. After the first fetch, changes to the watched sources will trigger a refetch, but not before that. This is a change from previous behavior and is now consistent between useFetch and useAsyncData Key Change Behavior in useAsyncData and useFetch. - The watch option allows you to specify additional reactive sources to watch, but again, with immediate: false, you need to manually trigger the first fetch (e.g., by calling refresh or execute). After that, changes to the watched sources will trigger refetches Key Change Behavior in useAsyncData and useFetch. - If you want full manual control, you can set watch: false and handle all refreshing yourself. Why does your manual watcher work? Your manual watcher works because it explicitly calls refresh() whenever the watched values change, regardless of the immediate setting. This bypasses Nuxt's internal logic and ensures the fetch is triggered exactly when you want. Summary:
With immediate: false, Nuxt will not automatically fetch on reactive source changes until the first fetch has occurred. After the first fetch, reactivity works as expected. If you want to ensure fetching happens on every change, you need to either: - Trigger the first fetch manually, or - Use your own watcher (as you did), which gives you full control. For more details, see the official documentation: Key Change Behavior in useAsyncData and useFetch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•4mo ago
<@210882495707742219> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?