help: Before mount, await useFetch

[arkhamvm]

📚 What are you trying to do? Please describe.
On the client, before component will be mounted, I want to completely load data.

🔍 What have you tried?

	setup() {
		const pageData = ref<PageData | null>(null);

		const {params, error} = useContext();
		useFetch(async () => {
			const pageDataStore = usePageDataStore();

			await pageDataStore.fetchDataById(params.value.id);

			pageData.value = pageDataStore.currentData;
			if (null === pageData.value) {
				return error({statusCode: 404, message: 'Not Found'});
			}
		});

		return {
			pageData,
		};
	},

ℹ️ Additional context
According to Nuxt lifecycle, I expect that useFetch will be completely done, like fetch does.
This is especially distressing in pageComponents - page transition is complete, but page is empty and waiting for data.

https://nuxtjs.org/_nuxt/image/de48ca.svg

[rchl]

Do you have a simple example that you could share that doesn't use custom functions like usePageDataStore that we don't have access to?

[arkhamvm]

It can be anything, just await sleep 5 seconds

[rchl]

What is your issue in the first place? Can you provide a reproduction and specify the steps to reproduce and expected behavior?

Also are you doing SPA navigation? There is a lot of stuff to guess here and if you don't help us with all the needed information then we can't help you. Please do your share of the work if you expect help.

[arkhamvm]

Sorry, just finished with repro repo:
https://codesandbox.io/s/determined-wood-ludn1b?file=/pages/posts/index.vue

Click on "Post" link. Page will show "LOADING" for 3 seconds after navigation.
I need to do navigation after fetch is completed.

are you doing SPA navigation?

Yes, I writed it before:

page transition is complete, but page is empty and waiting for data

[rchl]

That's how fetch (useFetch) is supposed to work AFAIK. On SPA navigation it doesn't block page loading and it exposes $fetchState so that you handle loading state in the page itself.

If you expect the behavior where the page loading is blocked until full load then you should use asyncData (useAsync). But to be fair I've tried that now and that one also doesn't block page loading on SPA navigation... So maybe that's buggy? Not sure, I haven't started using this module properly yet.

See my CS that uses useAsync: https://codesandbox.io/s/runtime-wind-svbdd3?file=/pages/posts/index.vue.

[rchl]

(BTW. If my codesandbox doesn't work the it's probably codesandboxes fault. Maybe download it and try locally)

[danielroe]

Here's a stackblitz we can use: https://stackblitz.com/edit/github-jc3ome.

[rchl]

So useAsync also doesn't really promise that it will block page navigation. This is an excerpt from the documentation:

However, if the call hasn't been carried out on SSR (such as if you have navigated to the page after initial load), it returns a null ref that is filled with the result of the async call when it resolves.

It's quite confusing given that it's called very similar to useAsyncData which does block navigation in Nuxt 3.

Here is a Nuxt 3 example that DOES block navigation: https://stackblitz.com/edit/github-jmkwfk?file=pages%2Findex.vue,package.json,pages%2Fposts%2Findex.vue

And here is Nuxt 2 which doesn't: https://stackblitz.com/edit/github-jc3ome-osg6rc?file=pages%2Fposts%2Findex.vue

I'm not sure if the intention is that the Options API is used when requiring asyncData behavior? Do you know @danielroe?

[rchl]

Seems like this is not intended to work like asyncData. Daniel made it clear in #623.

Thus I would just use this issue for clarifying this in the documentation.

[arkhamvm]

So, what I should to do?
Just not use composition-api with Nuxt2?

[danielroe]

Blocking route change with a composable is not supported by the Vue 2 composition API. This is why, when we rewrote Nuxt composables in Nuxt Bridge, we chose to use useLazyAsyncData - to avoid potential confusion.

[arkhamvm]

@danielroe Bridge still marked as not ready for production and have dependency issues in my project.
Maybe it can be done with router middleware? Check fetchState for example?

[rchl]

Bridge still marked as not ready for production and have dependency issues in my project.

I think you misunderstood. Bridge also doesn't support it. The useLazyAsyncData name was used to signify that it doesn't block navigation.