[2.14.0] Static Payload not applying to <nuxt-child> children components in some cases

[FreekVR]

May be related to #7791

Nuxt payloads do not always apply correct in generated apps with target: static, if nuxt-child is used, and both a child component of the higher-level component, and one of the children of nuxt-child implement fetch() (see diagram below)

Versions

• nuxt: 2.14.0
• node: 10.23.0

Reproduction

Source: https://github.com/FreekVR/nuxt-static-repro/tree/nested-fetch-issues

Demo: https://wonderful-ardinghelli-e41a6b.netlify.app/magazine/category/bar/

This will have correctly generated data on first (hard) load, but clicking the link-links present on the page will show that in SPA mode, the payload data is not applying afterwards.

This seems to be caused by the fetch() in this component, which is included in the nuxt-child parent component.

Steps to reproduce

Have an application implementing a structure like below (see repro source for practical implementation)

What is Expected?

Data is correctly applied from the payload when navigating through SPA links

What is actually happening?

Data is not applied / lost

[flozero]

Same error here. I will try to give more infos and another example repo soon too.

[honzabilek4]

I can confirm the issue, same behaviour as stated in description.
The page is generated correctly, even the payload data exist, but when navigating using <nuxt-link> the nested fetch hook is not being invoked.

[elisiondan]

Until this issue is resolved, we've opted for calling fetch in beforeMounted hook which seems to work properly with the static target.

  async fetch () {
    // fetching data
  },
  async beforeMount () {
    await this.$fetch();
  }

[stale]

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.

[FreekVR]

I can confirm that this issue still persists with the latest release, unfortunately.

[agursoy]

I also faced this bug. Is there any update?

[stale]

Thanks for your contribution to Nuxt!
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.

[FreekVR]

Issue is still occurring with the latest versions, unfortunately.

…

On Sun, 6 Dec 2020, 06:54 stale[bot], ***@***.***> wrote: Thanks for your contribution to Nuxt! 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. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#7799 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AADF5CESMMMEE5UTFJJAV3TSTMMALANCNFSM4PKVKPVA> .

[JustinRvt]

I'm so much following this as I'm experiencing the same issues.

For me, it appears that some variables are fetched, like {{article.name}} but if want to more in depth like {{article.image.formats.large.url}} I'll get a undefined on formats unless it as a parameter. Which works until I refresh and break everything to an apollo error 400.

Kind of annoying :/

[danielroe]

Closed in #8466. Would appreciate testing via nuxt-edge to confirm fix.