Nuxt 3 Pagination Issue – Switching Categories Retains Incorrect Page State

[south pier]

Hi @dull briar. 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 information provided in the knowledge sources and your question, it appears that you're experiencing a caching issue with useFetch or useAsyncData in your Nuxt 3 application, specifically in production. This is a known issue that can occur when Nuxt caches data and doesn't re-fetch when it thinks it's the same API call.

Here are some potential solutions you can try:

1. Use a unique key for useFetch:
   As suggested in this Stack Overflow post, you can add a key value inside the useFetch options object with a unique value every time. For example:

   const { data } = await useFetch('/api/articles', {
     key: `articles-${category}-${Date.now()}`,
     // other options...
   })
   

   This approach forces a new fetch each time the category changes or the component re-renders.

2. Use refreshNuxtData:
   You can use the refreshNuxtData utility to refetch all data or specific data when changing categories. As described in the Nuxt documentation, you can use it like this:

   const refreshData = async () => {
     await refreshNuxtData('articles') // 'articles' is the key used in useFetch or useAsyncData
   }
   

   Call this function when changing categories to ensure fresh data is fetched.

3. Clear Nuxt state:
   You can use clearNuxtState to invalidate the state when changing categories. As mentioned in the Nuxt documentation, you can use it like this:

   clearNuxtState('articles') // 'articles' is the key used in useState
   

   This will clear the cached state and force a re-fetch of data.

4. Combine approaches:
   For a more robust solution, you might want to combine these approaches. For example:

   const changeCategory = async (newCategory) => {
     clearNuxtState('articles')
     await refreshNuxtData('articles')
     // Update your route here, e.g., navigateTo(`/${newCategory}`)
   }
   

Remember to call this function whenever you change categories.

It's important to note that these solutions are based on general Nuxt 3 behavior and the information provided in the knowledge sources. Your specific implementation might require some adjustments.

If these solutions don't resolve your issue, you might want to consider filing an issue on the Nuxt GitHub repository with a minimal reproduction of your problem, as it could be a bug specific to your use case or environment.

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

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