fix(nuxt): reuse `asyncData` promise with existing key

[cherrymarker]

🔗 Linked issue

#4758

❓ Type of change

• [ ] 📖 Documentation (updates to the documentation or readme)
• [x] 🐞 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)
• [ ] ⚠️ Breaking change (fix or feature that would cause existing functionality to change)

I suppose this is technically a breaking change if applications are dependant on the original broken behaviour.

📚 Description

I have modified useAsyncData to return the correct data (the original asyncdata from the first call) associated with a request in the case that another call is made to useAsyncData while the original promise is still pending.

This change allows you to call useAsyncData on a single key, within multiple components, and work with the data on the server side without subsequent calls resolving to pending and null.

Resolves #4758 for now, more robust solution required in future.

📝 Checklist

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

[cherrymarker]

On further inspection this fix is a bit wonky, bear with

[danielroe]

@cherrymarker Oops, sorry, missed your comment. Will hold any further comments for now.

[cherrymarker]

While this fix "sort of" works, I have realised due to this line there may be problems https://github.com/nuxt/framework/blob/d9b6c8a59bd4f1f1f6280e1d55d10ddd477d2eea/packages/nuxt/src/app/composables/asyncData.ts#L170

The original asyncdata is still passed along.

A better solution would be to store the asyncData, and fetch it later IF the promise has already been found.

[cherrymarker]

Updated to a better solution that works both client and server side.

Wasn't sure about the type definition in nuxt.ts but gave it a go.

[netlify[bot]]

✅ Deploy Preview for nuxt3-docs canceled.

Name	Link
🔨 Latest commit	37c69f2ecfefc9dd1ea0957df248ec5f3abae63f
🔍 Latest deploy log	https://app.netlify.com/sites/nuxt3-docs/deploys/628bcbc9a6d2160008401d7d

[danielroe]

I wonder if this would be an opportunity to share asyncData across calls, which would also address a related issue where pending can get out of sync. Thoughts?

[cherrymarker]

I think that the design of useAsyncData is a bit messy and could be simplified by just using async methods.

Instead of data and error being stored on nuxt.payload it would be easier to store all of asyncData on payload instead and retrieve it on a matching key.

I think instead of having pending as a bool, a Promise that resolves when the handler is finished is far more useful and easier to use.

[atinux]

I think that the design of useAsyncData is a bit messy and could be simplified by just using async methods.

What do you have in mind?

Instead of data and error being stored on nuxt.payload it would be easier to store all of asyncData on payload instead and retrieve it on a matching key.

This makes sense since it will keep the scope of each one (error shall be used for global error handling)

I think instead of having pending as a bool, a Promise that resolves when the handler is finished is far more useful and easier to use.

Not 100% sure about this since most people use v-if="pending" for state handling.

[pi0]

Hi @cherrymarker thanks for PR and sorry it took long to review.

We are iterating over this issue to fix related issues. Please check https://github.com/nuxt/framework/pull/5738#issuecomment-1231506057 for a summary of changes and plans opened so far.

Feel free to try changes and share feedbacks via issue for any suggestions.