N
Nuxt•3mo ago
dayo_Li

How to avoid the caching mechanism in Nuxt 4?

Project Application: Admin Management System Scenario: I need to add a new item to a list. Code Logic Description: First enter the page → call the pagination API. Click Add → call the add API. After adding is completed → call the pagination API again to update the data. Problem: After the add API call is finished, the pagination API is not triggered. I tested this in Nuxt 3.16 and it worked fine, but in Nuxt 4 the pagination API call is skipped. My Thoughts: I logged the process and found that the code did enter the API call, but there was no related request in Network. I suspect this is due to the useFetch caching mechanism. Since the API request for the first page load and the one after adding are exactly the same (same URL and parameters), Nuxt directly served the cached data instead of making a new request. When I added a timestamp to the API parameters, the request worked normally. But adding a timestamp to every API call is obviously not a good practice. I’d like to know: Has anyone else run into this issue? How should it be solved?
2 Replies
kapa.ai
kapa.ai•3mo ago
Hi @dayo_Li. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Short answer: don’t add timestamps. Use the provided refresh APIs or keys. What changed in Nuxt 4 - Nuxt’s data fetching is a singleton/shared cache per key. Calls with the same key share data, error, and status. Options like transform/pick must be consistent. [Singleton layer; Shared state] - Reactive keys and refetch behavior were aligned between useFetch and useAsyncData. With immediate: false, changing the key won’t fetch until the first execute/refresh happens. [Key change behavior] Recommended fixes 1) Manually refresh after the “add” mutation: - Keep the same URL/params; call refresh on the same useFetch instance (or refreshNuxtData by key). 
<script setup lang="ts">
const { data, refresh } = await useFetch('/api/items', { key: 'items:list', query: { page: 1 } })

async function addItem(payload) {
  await $fetch('/api/items', { method: 'POST', body: payload })
  await refresh() // refetches the list
  // or: await refreshNuxtData('items:list')
}
</script>
<script setup lang="ts">
const { data, refresh } = await useFetch('/api/items', { key: 'items:list', query: { page: 1 } })

async function addItem(payload) {
  await $fetch('/api/items', { method: 'POST', body: payload })
  await refresh() // refetches the list
  // or: await refreshNuxtData('items:list')
}
</script>
[Refresh and execute; refreshNuxtData; useFetch] 2) Use an explicit key for the list and reuse it wherever you need to refresh/share: - Keys control caching and sharing. Reusing the key lets refreshNuxtData target it. [Data fetching intro; Keys] 3) If you rely on reactive keys to trigger refetches with immediate: false: - Trigger the first fetch manually (execute/refresh) or watch once: 
const id = ref('123')
const { data, execute } = await useFetch('/api/test', { query: { id }, immediate: false })
watch(id, () => execute(), { once: true })
const id = ref('123')
const { data, execute } = await useFetch('/api/test', { query: { id }, immediate: false })
watch(id, () => execute(), { once: true })
You can opt out and force fetch-on-key-change globally with experimental.alwaysRunFetchOnKeyChange: true. [Key change behavior] Advanced options - You can globally refresh all or specific data via refreshNuxtData(), but prefer instance.refresh() when you have it. [refreshNuxtData; Refresh and execute] - If you’re prerendering, be aware of shared prerender data across pages; ensure keys uniquely map to data. [Shared prerender data] Conclusion Do not defeat caching with timestamps. Keep a stable key for your list, and after the add API succeeds, call refresh() (or refreshNuxtData with that key) to refetch the pagination endpoint. [Refresh and execute; refreshNuxtData] ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•3mo ago
<@1410870997061603339> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?