Trouble with multiple pinia actions inside useAsyncData

I want to fetch a bunch of paginated data on pageload, so I use

useAsyncData

useAsyncData

to avoid dupe requests. I get that you're not really meant to use

useAsyncData

useAsyncData

for side-effects but since it's the only mechanism I know of that prevents duplicate fetches, it's what I got.

The problem is, when I generate an array of requests to pass into a Promise, the function stalls. It's not that the

reqs

reqs

array is undefined - it's that nothing runs past it inside that function. asyncData simply returns null before ever reaching the Promise.

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

What am I doing wrong?

Trouble with multiple pinia actions inside useAsyncData

I want to fetch a bunch of paginated data on pageload, so I use

useAsyncData

useAsyncData

to avoid dupe requests. I get that you're not really meant to use

useAsyncData

useAsyncData

reqs

reqs

array is undefined - it's that nothing runs past it inside that function. asyncData simply returns null before ever reaching the Promise.

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

const { data } = await useAsyncData('overview', async () => {
    await FETCH_OVERVIEW('ideas');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)); // <-- FETCH_IDEAS_BY_THEME is not being read and the function stalls here
    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);
    if (filters.length) {
        reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    await Promise.allSettled(reqs);

    return { filters };
});

What am I doing wrong?

Trouble with multiple pinia actions inside useAsyncData

Similar Threads

Trouble with multiple pinia actions inside useAsyncData

Similar Threads

Similar Threads

Similar Threads