Nuxt.js: asyncData is missing the `query` object on nuxt generate

[remy]

Version

v2.8.1

Reproduction link

https://vue-asyncdata-demo-hnxvktmgni.now.sh/

Steps to reproduce

This is the source for the demo.

When the project is generated into a static build using NODE_ENV=production npx nuxt generate, the query object is missing from the asyncData method.

In the example provided, it expects to capture ?value=123 and put the 123 in the input element. This works during development but not once it's build to a static site.

Working demo here: https://vue-asyncdata-demo-hnxvktmgni.now.sh/dist/?value=123

The object is entirely missing from the context argument.

What is expected ?

To have query injected as per development process.

What is actually happening?

Missing query from context.

_{This bug report is available on Nuxt community (#c9365)}

[pimlie]

Does this happen just on initial page load or also with in-page navigation?

[remy]

Initial page load.

Unsure of in-page nav - I didn't have a use case for that (and hadn't tested)

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[stale[bot]]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[pimlie]

Does the asyncData method run at all on initial page load in your case? Dont think its supposed too as on hydration of a generated page it retrieves the data from the window.__NUXT context.

In other words, if your generated page is supposed to work with query parameters these parameters should either also be used when generating those pages or you should implement some sort of hydrate mechanism in eg the beforeMount or mounted hook.

[Jones-S]

Hi there. Have to dig this one out.
Just realized I also have no query within asyncData on initial load of a generated page.

asyncData() is executed (I assigned some random values to a reactive variable, which I then show in the client later on, so I know it runs).

I also tried to assign the { query } param to a reactive property and what I get is an empty object.

I need this to render some different content when calling the app with a preview iframe form Craft CMS. I know I had access to those once, but I must have changed something, that I don't have access anymore and I cant find out, what it is...

[Jones-S]

I think when using nuxt generate I don't have any server-side calls anymore. is that correct? (static mode). So asyncData is actually not executed on initial load, because there is no server. But why do I see those random values I assigned?
this is because asyncData is called during nuxt generate! So in my case asyncData is actually NOT called!

Would that make sense?

[Atinux]

When using nuxt generate, Nuxt will pre-render each route without any query parameters (since it becomes a static html file), so asyncData is called with query = {}.

Also, when the route is pre-rendered, asyncData won't be called on client-side on hydration and use window.__NUXT__.data value.

If you want to change the behaviour if a query is present, you need to handle it on client-side (using beforeMount or mounted hook).

Example:

export default {
  asyncData ({ query } = {}) {
    return { value: query.value };
  },
  beforeMount() {
    // for hydration
    if (this.value !== this.$route.query.value) {
      this.value = this.$route.query.value
    }
  }
}