0

I have a question. Inside Nuxt's fetch hook I have some asynchronous calls that are performed by Nuxt content API. enter image description here

Some pieces of this data are then used inside mounted hook.

enter image description here

But while Nuxt handles first request inside fetch, the control flow passes to the mounted hook and hence there's no needed data.

enter image description here

Yes, I tried uses something like if (!this.$fetchState.pending) return; but obviously mounted is called only once. Does anybody knows how can I force Nuxt to wait? Btw, the app is using static site generation and the component has property fetchOnServer set to false.

Lazouski
  • 49
  • 7
  • 1
    Did you tried using `asyncData` rather than `fetch`? This is blocking the transition until everything is done fetching. https://nuxtjs.org/docs/features/data-fetching#async-data – kissu Jul 04 '22 at 13:05
  • Unfortunately, this is not a page component. This logic is inside `default.vue` layout file – Lazouski Jul 04 '22 at 13:39
  • So, you need to know that something is both `mounted` + `done fetching`, then run some code? You could use the `@hook` approach explained here: https://stackoverflow.com/a/67535239/8816585 Or make your call into a middleware that is called there. Since a middleware will wait for the query to be done before making the transition, it can achieve a blocking fetch hook. Otherwise, the best approach would be probably to find a different way of doing things like router guards (before/after navigation maybe?). – kissu Jul 04 '22 at 14:02

0 Answers0