NuxtN
Nuxt4mo ago
10 replies
tommywayss

Watch/Dedupe issue

Minimal example

const { date } = useDateRange() // date: Ref<{ start: Date; end: Date }>
const { data, pending, error } = await useFetch<T>('/api/any', {
  query: {
    started_after: computed(() => date.value.start.toISOString()),
    finished_before: computed(() => date.value.end.toISOString()),
  },
})

// periodically reassign the whole object (simulates a single user action)
useTimeoutPoll(() => {
  date.value = { start: new Date(), end: new Date() }
}, 1000)


Actual behavior

/api/any 200 // initial
/api/any 200 // first trigger
/api/any Cancelled // also first trigger but deduped with cancellation
/api/any 200 // second trigger
/api/any 200 // third trigger


Expected behavior

/api/any 200 // initial
/api/any 200 // first trigger
/api/any 200 // second trigger
/api/any 200 // third trigger


Observation

When a key parameter is added to useFetch, the behavior is correct. Without a key, the duplicated request and cancellation occurs.
Was this page helpful?