asyncData not updating correctly using watchQuery (HMR, dev mode)

Timkor
6
Timkor
commented 5 months ago

Version

v2.8.1

Reproduction link

https://codesandbox.io/s/codesandbox-nuxt-lfoy3?fontsize=14

Steps to reproduce

Click the Change query randomly to see asyncData working. It will update the current route's query and display this value on the page.

  1. Now change in ~/pages/index.vue:
await new Promise(resolve => setTimeout(resolve, 1000));

to

//await new Promise(resolve => setTimeout(resolve, 1000));
  1. Press save.
  2. Wait until compilation is done.
  3. See that it is broken when clicking the link.
  4. Remove the // comment, so that it's restored back to normal.
  5. Press save.
  6. See that it is still broken.

What is expected ?

asyncData should be called. And the data should be updated with the return value.

What is actually happening?

asyncData is being called. However, the return value is not updating the components data though.

bug
1
dr3tt
0
dr3tt
commented 4 months ago

I tried with a simple console.log('foo') (instead of Promise+setTimeout) and the same issue occurred.
Only a fresh rebuild (i.e. without HMR) makes things work.

0
Timkor
6
Timkor
commented 3 months ago

Bump

0
papakay
0
papakay
commented 3 months ago

Also experiencing this issue…

0
xxRockOnxx
0
xxRockOnxx
commented a month ago

Even if not using asyncData and just using data instead, it seems like watchQuery is not re-registered on hot reload.

using watch on $route works as an alternative.

EDIT:

when a hot reload happened, data() is actually called once again but when query is updated it doesn't anymore.

The issue is not actually tied to asyncData.

0
jmacmac
0
jmacmac
commented 4 days ago

Bump. What's the accepted (acceptable?) solution here?

0
Informations
Bug ReportOpen
#c9432 - Created 5 months ago