Nuxt•2mo ago

useAsyncData/useFetch > Function > Pinia Action - Best practices?

Hey folks, looking for some advice. I currently have something like this

const { error } = useAsyncData('details', async () => {
  if (isSelected.value) return details.value

  await fetchdetails()

  return details.value
})

const { error } = useAsyncData('details', async () => {
  if (isSelected.value) return details.value

  await fetchdetails()

  return details.value
})

so I already think im using it weird, but then that fetchDetails is in the component, and it has some logic on building a payload, which ultimately then fires off a pinia action, and then our pinia action, uses useFetchApi (which is a composable of $fetch) - so were now at like 4 levels of execution lol, it just feels a bit icky. Im just wondering what the best practices here might be, like the useAsyncData at the top, would that be advised/not advised given the scenario ive explained?

4 Replies

kapa.ai•2mo ago

Hi @kb. 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 advice on best practices for using useAsyncData and useFetch in combination with Pinia actions in Nuxt 3. 1. Simplify the data fetching chain: Your current setup involves multiple levels of execution, which can indeed feel "icky" and potentially lead to unnecessary complexity. It's generally a good practice to simplify this chain. 2. Use useFetch for simple API calls: If you're making a straightforward API call, useFetch is often the cleaner and easier-to-read option. As mentioned in the Stack Overflow post (https://stackoverflow.com/questions/76839341), useFetch is a wrapper around useAsyncData and $fetch, providing a more straightforward API for common use cases. 3. Consider moving logic to Pinia store: Instead of having the payload building logic in the component, consider moving it to your Pinia store. This can help separate concerns and make your component code cleaner. 4. Use useAsyncData for more complex scenarios: If you need more control over the data fetching process or if you're not directly fetching from an API, useAsyncData might be more appropriate. As stated in the Nuxt documentation (https://nuxt.com/docs/getting-started/data-fetching), useAsyncData offers more fine-grained control compared to useFetch. 5. Avoid nested async calls in composables: As you discovered and mentioned in your Stack Overflow answer (https://stackoverflow.com/questions/77949232), Nuxt composables should not be used with await before calling another composable. This can lead to errors and unexpected behavior. Here's a suggested approach to restructure your code: 1. Move the fetchDetails logic to your Pinia store action. 2. In your component, use useFetch or useAsyncData to call the Pinia action directly.

// In your Pinia store
actions: {
  async fetchDetails() {
    // Build payload and fetch logic here
    const response = await $fetch('/api/details', { /* options */ })
    this.details = response
    return response
  }
}

// In your component
const store = useYourStore()
const { data: details, error } = await useFetch(() => store.fetchDetails())

// In your Pinia store
actions: {
  async fetchDetails() {
    // Build payload and fetch logic here
    const response = await $fetch('/api/details', { /* options */ })
    this.details = response
    return response
  }
}

// In your component
const store = useYourStore()
const { data: details, error } = await useFetch(() => store.fetchDetails())

This approach simplifies your data fetching chain, keeps the logic in appropriate places, and avoids the nested async calls that were causing issues. Remember, as stated in the Nuxt documentation (https://nuxt.com/docs/api/composables/use-async-data), when using a custom wrapper around useAsyncData or useFetch, you should not await it in the composable to avoid unexpected behavior. By following these practices, you can create a more maintainable and efficient data fetching structure in your Nuxt 3 application. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

kbOP•2mo ago

anyone got any wise words on this 😄

dmarr•2mo ago

pinia colada?

Gaming

Programming

useAsyncData/useFetch > Function > Pinia Action - Best practices?