Nuxt•2d ago

Trouble with multiple pinia actions inside useAsyncData

I want to fetch a bunch of paginated data on pageload, so I use useAsyncData to avoid dupe requests. I get that you're not really meant to use 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 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?

2 Replies

kapa.ai•2d ago

Hi @scrongly. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, I can offer some insights into your issue with useAsyncData and multiple Pinia actions. However, I don't have specific information about using Pinia actions within useAsyncData, so I'll focus on the general usage of useAsyncData and potential issues that might be causing your problem. 1. Handler function return value: The handler function passed to useAsyncData must return a truthy value, or the request may be duplicated on the client side Docs > Api > Composables > useAsyncData (https://nuxt.com/docs/api/composables/use-async-data). In your code, you're returning an object with a filters property, which should be fine as long as filters is not undefined or null. 2. Asynchronous operations: Make sure all asynchronous operations inside the handler function are properly awaited. In your code, you're using await for the initial FETCH_OVERVIEW call and the final Promise.allSettled, which is correct. 3. Reactive sources: If any of the values you're using inside the handler function (like OVERVIEWS.value) are reactive, you might want to consider using the watch option to automatically rerun the fetcher function when these values change Docs > Api > Composables > useAsyncData (https://nuxt.com/docs/api/composables/use-async-data). 4. Error handling: Add proper error handling inside your handler function to catch and log any errors that might be occurring during the execution of your Pinia actions. 5. Debugging: To understand why the function is stalling, add console.log statements at various points in your handler function to see where exactly it stops executing. 6. Alternative approach: If you're mainly concerned about avoiding duplicate requests, you might want to consider using the dedupe option of useAsyncData. Setting it to 'defer' will prevent making new requests if there's already a pending request for the same key Docs > Api > Composables > useAsyncData (https://nuxt.com/docs/api/composables/use-async-data). Here's a modified version of your code with some of these suggestions implemented:

const { data, error } = await useAsyncData('overview', async () => {
  try {
    console.log('Starting overview fetch');
    await FETCH_OVERVIEW('ideas');
    console.log('Overview fetched');

    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);

    console.log('Preparing requests');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)) || [];
    if (filters.length) {
      reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    console.log(`Prepared ${reqs.length} requests`);

    console.log('Executing requests');
    const results = await Promise.allSettled(reqs);
    console.log('Requests completed');

    return { filters, results };
  } catch (e) {
    console.error('Error in useAsyncData handler:', e);
    throw e;
  }
}, {
  dedupe: 'defer',
  watch: [() => OVERVIEWS.value]
});

if (error.value) {
  console.error('AsyncData error:', error.value);
}

const { data, error } = await useAsyncData('overview', async () => {
  try {
    console.log('Starting overview fetch');
    await FETCH_OVERVIEW('ideas');
    console.log('Overview fetched');

    const { query } = useRoute();
    const filters = GET_FILTERS_BY_SLUG('ideas', query.filters as string[]);

    console.log('Preparing requests');
    const reqs = OVERVIEWS.value.ideas?.featuredThemes.map((theme: any) => FETCH_IDEAS_BY_THEME(theme.value)) || [];
    if (filters.length) {
      reqs.push(FETCH_FILTERED_IDEAS(filters));
    }
    console.log(`Prepared ${reqs.length} requests`);

    console.log('Executing requests');
    const results = await Promise.allSettled(reqs);
    console.log('Requests completed');

    return { filters, results };
  } catch (e) {
    console.error('Error in useAsyncData handler:', e);
    throw e;
  }
}, {
  dedupe: 'defer',
  watch: [() => OVERVIEWS.value]
});

if (error.value) {
  console.error('AsyncData error:', error.value);
}

This modified version includes more logging, error handling, and uses the dedupe option. It also watches the OVERVIEWS value for changes. If you're still experiencing issues after trying these modifications, you might want to consider breaking down your complex operation into smaller, more manageable pieces, possibly using multiple useAsyncData calls or a custom solution that better fits your specific use case. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2d ago

<@335863452692119552> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Gaming

Programming

Trouble with multiple pinia actions inside useAsyncData