Nuxt•3w ago

Request cancellation - dedupe on post requests

I have this useFetch:

js 
    const { data, execute } = await useFetch('/api/cars/filter', {
      method: 'POST',
      ignoreResponseError: true,
      body,
      immediate: false,
      server: false,
      dedupe: 'cancel',
    })

js 
    const { data, execute } = await useFetch('/api/cars/filter', {
      method: 'POST',
      ignoreResponseError: true,
      body,
      immediate: false,
      server: false,
      dedupe: 'cancel',
    })

But i don't see previous request getting cancelled. What am I doing wrong?

5 Replies

kapa.ai•3w ago

Hi @Mads. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources, the dedupe: 'cancel' option in useFetch (and useAsyncData) is intended to avoid making a new request if there is already a pending request with the same key. In other words, if you trigger multiple requests with the same key at the same time, only the first one will be sent, and subsequent ones will be ignored (not canceled, but not sent at all). However, according to user reports and official comments, there is currently no true request cancellation for previous requests in Nuxt's useFetch. The dedupe option only deduplicates concurrent requests, not sequential ones. If you trigger a new request after the previous one has already started, it will not cancel the previous request; both will proceed, but only the result of the latest will be reflected in the shared state. This behavior is confirmed in the following sources: - "There is NO cache by default, dedupe is only useful when make a request multiple times at the same time, subsequent request at later time still send to server, but the result will affect everywhere that use the same request."
Github Issue: UseFetch / UseAsyncData Dedupe not Working - "dedupe: 'cancel' does NOT cancel existing request, dedupe: 'defer' works as expected."
Github Issue: UseFetch / UseAsyncData Dedupe not Working So, if you want to truly cancel previous requests, this is not currently supported by Nuxt's useFetch out of the box. The dedupe: 'cancel' option only prevents new concurrent requests, not cancels in-flight ones. Summary:
You are not doing anything wrong—this is the current limitation of Nuxt's useFetch. If you need true request cancellation, you would need to implement it manually, possibly by using lower-level fetch APIs with AbortController, as this is not handled by useFetch at this time. If you need more advanced control, you may want to follow Nuxt's ongoing discussions and issues about caching and deduplication strategies for future improvements Github Issue: Network request is sent even with the same key for useFetch. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

MadsOP•3w ago

So how do you suggest i make sure they come in in right order? @kapa.ai So how do you suggest i make sure they come in in right order?

kapa.ai•3w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- To ensure that only the latest response is used and that responses come in the correct order when using useFetch for POST requests, the knowledge sources suggest that Nuxt's built-in deduplication does not guarantee this—especially since previous requests are not actually canceled and may resolve out of order. This can lead to race conditions where an earlier, slower request overwrites the result of a later, faster one. A common workaround, as seen in the Nuxt community, is to use a unique key for each request (for example, based on a timestamp or a unique identifier for each request). This ensures that each request is treated independently by Nuxt, but it does not solve the race condition problem by itself. The knowledge sources do not provide a built-in solution for guaranteeing response order or for discarding outdated responses. However, you can implement your own logic to track the latest request and only process its response. For example, you can use a local counter or token to identify the latest request and ignore responses from previous ones. Key points from the sources: - dedupe only deduplicates concurrent requests, it does not cancel or manage the order of responses for sequential requests. - There is no built-in mechanism in useFetch to ensure that only the latest response is used if multiple requests are made in quick succession Github Issue: UseFetch / UseAsyncData Dedupe not Working. - Using a unique key can help with caching and deduplication, but not with response order Stack Overflow: Nuxt website shows old data when refreshing a page that uses useFetch. Summary:
The knowledge sources do not describe a built-in way in Nuxt to guarantee that only the latest response is used or to ensure correct response order for multiple POST requests. You would need to implement your own logic to track and handle responses accordingly. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•3w ago

<@335112909350895632> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Request cancellation - dedupe on post requests

Did you find this page helpful?