It seems that the parent page, and all child pages do their validate
, asyncData
, and fetch
calls in parallel. This means that if I have a child _post
page that needs to validate the ID, I cannot assume the parent posts
page has already loaded the posts array to check against. So while the parent posts
page is making an asynData
request, the child post
page is making its own request for the same data (for validation). This can result is many unnecessary data fetches (between parent page/child page
). It can also create race conditions to read/write to the store.
Is there a way to toggle the layout / page initialization to run in series? Meaning, the parent page would run it's validate
/ asyncData
/ fetch
. Then the child page. Then the child's child page, etc.. This would allow the child page to depend on certain data already being set by the parent page. Maybe an await: true
for waiting till the parent parent has finished initializing?
Worth noting, using nuxtServerInit
is a sort of work around. This actually does happen before any pages start validating or calling asyncData
/ fetch
. This means that you can do something like this:
async nuxtServerInit (store, context) {
if (_.startsWith(context.route.name, 'dashboard-foo')) {
await store.dispatch('fooDashboard/fetchInitialState', { fooId: context.route.params.foo })
}
}
This will load the initial state for that page (and any of its children), so that validations have something to validate against. The downside though, is that it requires loading more data than potentially needed upfront (slowing page load). With GraphQL that can be somewhat mitigated. Still, I think validating / fetching pages in series would be a cleaner way to solve this issue.
<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c2282">#c2282</a>)</em></sub></div>