rc.12 useLazyAsyncData refresh() hangs when called during script setup on subsequent page visit

[ian4uia]

Environment

---

• Operating System: Linux
• Node Version: v16.18.0
• Nuxt Version: 3.0.0-rc.12
• Nitro Version: 0.6.0
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: buildModules
• Runtime Modules: -
• Build Modules: @pinia/nuxt@0.4.3

---

Reproduction

1. Clone issue repo

git clone https://github.com/ian4uia/nuxt3rc12-datafetch

2. Install app

cd nuxt3rc12-datafetch
yarn install

3. Run dev server

yarn run dev

4. Go to localhost:3000. The page fetches a random dog image.
5. Click on the page 2 link to open the second page.
6. Now click on the 'Go Back' button to return to the main page.
7. See the bug. The page should refresh the data and show a new image of a dog but it hangs showing the 'Loading...' text indefinitely.

Describe the bug

When index.vue is loaded for the first time useLazyAsyncData is run successfully and the data and refresh function are returned. You can test the refresh function using the button to verify this. On subsequent visits to the index page from pages within the app
useLazyAsyncData is not run because we already have data. However, we may decide to refresh the data using the refresh function but it doesn't work in this context. I've tested the app with rc11 and it works as expected.

Additional context

No response

Logs

No response

[jgupta]

Is there a workaround for same?

[ian4uia]

Further investigation shows that it's the Lazy flag that's causing the issue.
The following change works:

const { data: dogImage, pending, refresh } = useAsyncData(
    'dogImage',
    () => $fetch('https://dog.ceo/api/breeds/image/random'),
    {
      server: true,
      lazy: false // <-- Setting true causes refresh bug!
    }
  )

So if you're happy to block client-side navigation (the default) then you're OK.

[jgupta]

This seems like a bug related with cache. { initialCache: false } seems to fix this.

[ian4uia]

Yes, thanks. I added a page counter to the store that increases every time page 2 is visited.
The following works a treat :)

  const evenPage = () => pageStore.pageCount % 2 === 0 ? true : false
  const { data: dogImage, pending, refresh } = useLazyAsyncData(
    'dogImage',
    () => $fetch('https://dog.ceo/api/breeds/image/random'),
    {
      server: true,
      initialCache: !evenPage(),
    }
  )

[praveshishere]

Yes, thanks. I added a page counter to the store that increases every time page 2 is visited. The following works a treat :)

  const evenPage = () => pageStore.pageCount % 2 === 0 ? true : false
  const { data: dogImage, pending, refresh } = useLazyAsyncData(
    'dogImage',
    () => $fetch('https://dog.ceo/api/breeds/image/random'),
    {
      server: true,
      initialCache: !evenPage(),
    }
  )

I think, the issue will persist for any page you navigate to, not only for eventPage,
so setting initialCache on the basis of eventPage might not be of much help.

[Himanshu21git]

@ian4uia This bug has been fixed in the nuxt v3.0.0-rc.14 update.