this.$nuxt.refresh doesn't refresh every fetch hooks (^2.12.0)

[lihbr]

Hey friends 👋

Versions

• nuxt: 2.15.7
• node: v14.15.3

Reproduction

Steps to reproduce

1. Create ~/components/AppHeader.vue, a component that uses the fetch hook

<template>
	<header>Header from: {{ timestamp }}</header>
</template>

<script>
export default {
	fetch() {
		this.timestamp = Date.now();
	},
	fetchKey: "appHeader",
	data() {
		return {
			timestamp: 0
		};
	}
};
</script>

2. Update your ~/layouts/default.vue file to use your new fancy header

<template>
	<div>
		<button @click="refresh">Nuxt Refresh</button>
		<app-header />
		<nuxt />
	</div>
</template>

<script>
export default {
	methods: {
		refresh() {
			this.$nuxt.refresh();
		}
	}
};
</script>

3. Build your application and start it in production

yarn generate && yarn start

4. Fiddle with the Nuxt refresh button

What is expected?

Displayed timestamp in header should be refreshed/updated.

What is actually happening?

Displayed timestamp in header remains the same.

Context

When Nuxt refresh is called here's what happen regarding the fetch hook feature (vulgarized):

1. Nuxt gets the current page component;
2. Nuxt then crawls this component's children, looking for every fetch hooks;
3. Nuxt calls them.

Using our previous example, this leads to this.$nuxt.refresh successfully refreshing those fetch hooks:

  DefaultLayout
- ├── AppHeader, uses the fetch hook
  └── Nuxt (the current page)
+    ├── HeroComponent, uses the fetch hook
     ├── NewsletterComponent
     └── ArticleList
+        └── ArticleCard, uses the fetch hook

And as you can see, our app header's hook is left ignored 😢

Looking at the code in charge of that (https://github.com/nuxt/nuxt.js/blob/HEAD/packages/vue-app/template/App.js#L180-L193), we can clearly see that the "crawling components looking for fetch hooks" part starts from the page, not the layout, leading to the described-above issue.

Voilà! Let me know if anything, cheers~

[lihbr]

ps: https://github.com/nuxt/nuxt.js/blob/HEAD/packages/vue-app/template/App.js#L185, does this mean that if you have a fetch hook on a page it doesn't even look at underlying component maybe fetch hooks? (or am I just getting that one wrong?)

[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.

[danielroe]

We are approaching the Nuxt 2 EOL date (June 30, 2024) - see this article for more information. This is advance warning that I'm going to close this issue then, as it's currently marked as a Nuxt 2 related bug.

If it's a critical or security issue, please do comment and let me know, in case it is possible to address it before the EOL date.

If it's a an issue you think is relevant for Nuxt 3, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏

Thank you for your understanding and for your contribution to Nuxt. ❤️

[danielroe]

It's the day, at last. Nuxt 2 is now marked end-of-life.

My apologies we never got round to resolving this bug in the 2.x branch, but we do have to draw a line somewhere. Again, if you think this is still relevant for Nuxt going forward, please feel free to open a fresh issue (or just comment here so I can update labels, etc.). 🙏