Dedupe fetches in Nuxt

Since 3.9 we can control how Nuxt deduplicates fetches with the dedupe parameter:

useFetch('/api/menuItems', {
  // Cancel the previous request and make a new request
  dedupe: 'cancel'
});

The useFetch composable (and useAsyncData composable) will re-fetch data reactively as their parameters are updated. By default, they’ll cancel the previous request and initiate a new one with the new parameters.

However, you can change this behaviour to instead defer to the existing request — while there is a pending request, no new requests will be made:

useFetch('/api/menuItems', {
  // Keep the pending request and don't initiate a new one
  dedupe: 'defer'
});

This gives us greater control over how our data is loaded and requests are made.