fix(nuxt): update useNuxtData to access shared asyncData state

[94726]

🔗 Linked issue

resolves #19704
resolves #22696

❓ Type of change

• 📖 Documentation (updates to the documentation, readme or JSdoc annotations)
• 🐞 Bug fix (a non-breaking change that fixes an issue)
• 👌 Enhancement (improving an existing functionality like performance)
• ✨ New feature (a non-breaking change that adds functionality)
• 🧹 Chore (updates to the build process or auxiliary tools and libraries)
• ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

📚 Description

This change synchronizes the data value of useNuxtData and useAsyncData.

Currently, they aren't really in sync. This happens because the data in the payload (used by useNuxtData) and asyncData are not the same refs. They're only set to the same values on two occasions:

1. when a fetch resolved
2. when asyncData is first called per key and it gets hydrated by the payload

📝 Checklist

• I have linked an issue or discussion.
• I have updated the documentation accordingly.

[stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[danielroe]

Would you be able to add a regression test? This might be a case for doing so in the unit tests directory (see test/nuxt/composables.test.ts)...

[94726]

Will do, but I noticed that my implementation only works after hydration and not on the server which may lead to issues.
Also the default may now get thrown into the payload which doesn't make sense, I guess?

Maybe it's better to change useNuxtData to use nuxt._asyncData instead of the payload. Though that would also make useNuxtData return the default, at times :/
What do you think?

[madsh93]

It may also resolve this #22348

[danielroe]

Sorry for the long delay in getting back to you. I don't there's an issue with useNuxtData coming up with the default value. (But I do think we should keep the default value out of the payload.)

I'll mark this as draft as it sounds like there's a little more to do here. (And a test would be appreciated.)

[logotip4ik]

idk, but this does solve issue for me if page is initially loaded (when isHydrating is true). But it still breaks with client side navigation (isHydrating is false, because nuxt tries to get data from nuxt.static.data field, but there is none, for non generated websites). If you also add fallback for .static.data it will solve issue even for client side navigation.

in case any body wondering, here are changed lines in my patch (asyncData.js file):

-  const getCachedData = () => nuxt.isHydrating ? nuxt.payload.data[key] : nuxt.static.data[key];
-  const hasCachedData = () => getCachedData() !== void 0;
+  const getCachedData = () => nuxt.isHydrating ? toRef(nuxt.payload.data, key) : (nuxt.static.data[key] || toRef(nuxt.payload.data, key));
+  const hasCachedData = () => unref(getCachedData()) !== void 0;

upd: Now it breaks refetching asyncData. After first request data will be always cached and therefore never refetched ?

[94726]

Sorry for the long delay in getting back to you. I don't there's an issue with useNuxtData coming up with the default value. (But I do think we should keep the default value out of the payload.)

I updated useNuxtData to simply use _asyncData instead of the payload. That seemed like the easiest way to ensure synchronization without polluting the payload. The only drawback is that calling useNuxtData before useAsyncData will lead to skipping the initial default as _asyncData already exists. Probably not to much of a problem, but maybe could be changed if necessary.

I also included some tests for the synchronization + additional ones for asyncData default because there were none and I didn't want to break anything :)

[94726]

This should also resolve #22696

[codecov-commenter]

Codecov Report

All modified and coverable lines are covered by tests ✅

❗ No coverage uploaded for pull request base (main@c069239). Click here to learn what that means.

Additional details and impacted files

@@           Coverage Diff           @@
##             main   #22277   +/-   ##
=======================================
  Coverage        ?   58.76%           
=======================================
  Files           ?        5           
  Lines           ?      861           
  Branches        ?       46           
=======================================
  Hits            ?      506           
  Misses          ?      355           
  Partials        ?        0           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[metkm]

Any idea when this pr will be merged? This would be a good fix and needed I think

[94726]

I just fixed the remaining issues, but I'm not sure whether this is the best approach, as it makes all the _asyncData fields optional only because data is also being controlled by useNuxtData.

I also had the idea of splitting data into a seperate object and using the fact that toRef(reactiveObject, 'key') handles creation/tracking of the key even if it doesn't exist yet. See example.

Not sure what the better approach is here. Would love to get some feedback on it :)

[metkm]

@danielroe I hate to do this but any chance we can get this released on the next version? I think this bug should be a higher priority because using useNuxtData without sync does not make sense