N
Nuxt•6d ago
ThoorAdam

multiple awaited useFetch

Hello! Is it a good idea to have multiple useFetch-calls being awaited on a page after eachother? Or should I wrap them in something like Promise.all()? Does that approach have drawbacks? I feel like having them after one another might slow down loading of pages since they are sequential?
2 Replies
kapa.ai
kapa.ai•6d ago
Hi @ThoorAdam. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- You're right to be concerned about sequential useFetch calls potentially slowing down page loading. Let me explain the best practices for handling multiple data fetching operations in Nuxt. Sequential vs Parallel Requests When you have multiple useFetch calls that don't depend on each other, it's generally better to run them in parallel using Promise.all() to improve performance. This approach allows all requests to start simultaneously rather than waiting for each one to complete before starting the next. 
// Parallel requests using Promise.all
const [lectureData, checkedInStatus] = await Promise.all([
  fetchLectureData(),
  checkIfCheckedIn()
])
// Parallel requests using Promise.all
const [lectureData, checkedInStatus] = await Promise.all([
  fetchLectureData(),
  checkIfCheckedIn()
])
As shown in a Stack Overflow solution, this approach can help avoid errors and improve performance: 
Promise.all([fetchLectureData(), checkIfCheckedIn()])
  .then(([lectureFromDB, checkedIn]) => {
    // Handle the results
  })
  .catch((error) => {
    console.error(error);
  });
Promise.all([fetchLectureData(), checkIfCheckedIn()])
  .then(([lectureFromDB, checkedIn]) => {
    // Handle the results
  })
  .catch((error) => {
    console.error(error);
  });
Stack Overflow Post Using useAsyncData for Multiple Requests The Nuxt documentation specifically recommends using useAsyncData when you need to handle multiple fetch requests: 
const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
  const [coupons, offers] = await Promise.all([
    $fetch('/cart/coupons'),
    $fetch('/cart/offers')
  ])

  return { coupons, offers }
})
const { data: discounts, status } = await useAsyncData('cart-discount', async () => {
  const [coupons, offers] = await Promise.all([
    $fetch('/cart/coupons'),
    $fetch('/cart/offers')
  ])

  return { coupons, offers }
})
Nuxt Data Fetching Docs Potential Issues with Sequential Calls One important thing to note is that when using composables like useFetch in Nuxt, you must use them synchronously. The documentation warns that you cannot use await before calling a composable, which can lead to errors when you have sequential async operations where one blocks the other. Best Practices 1. Use Promise.all() for independent requests to improve performance 2. Consider using useAsyncData to wrap multiple $fetch calls 3. For more complex scenarios, you can follow the "Making parallel requests" recipe from the Nuxt documentation: 
const { data } = await useAsyncData(() => {
  return Promise.all([
    $fetch("/api/comments/"), 
    $fetch("/api/author/12")
  ]);
});

const comments = computed(() => data.value?.[0]);
const author = computed(() => data.value?.[1]);
const { data } = await useAsyncData(() => {
  return Promise.all([
    $fetch("/api/comments/"), 
    $fetch("/api/author/12")
  ]);
});

const comments = computed(() => data.value?.[0]);
const author = computed(() => data.value?.[1]);
Nuxt Data Fetching Recipes By following these patterns, you'll get better performance and avoid potential issues with composable usage in Nuxt. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------
kapa.ai
kapa.ai•6d ago
<@198832691402113024> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Did you find this page helpful?