Nuxt•5d ago

Best way to append new data to array from useAsyncData

const { data: practiceAreasData } = $api.practiceAreas.listPracticeAreas();

const { data: practiceAreasData } = $api.practiceAreas.listPracticeAreas();

practiceAreasData is an array. i have a form to create a new practice area. how can i append the newly created data without fetching all practice areas

2 Replies

kapa.ai•5d ago

Hi @the_aceix. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The best way to append new data to an array returned by useAsyncData—without refetching all data—is to directly mutate the reactive data ref. This is a common pattern in Nuxt, especially when implementing features like Optimistic Updates. Assuming your practiceAreasData is a ref containing an array, you can append a new item like this:

// After successfully creating a new practice area (e.g., via a form submission)
practiceAreasData.value = [...(practiceAreasData.value || []), newPracticeArea]

// After successfully creating a new practice area (e.g., via a form submission)
practiceAreasData.value = [...(practiceAreasData.value || []), newPracticeArea]

Or, if you want to mutate the array in place (which is also reactive):

practiceAreasData.value?.push(newPracticeArea)

practiceAreasData.value?.push(newPracticeArea)

This approach is documented in the Nuxt docs under Optimistic Updates, where the cached data is updated immediately after a mutation, and only refetched if needed (e.g., if the server operation fails) Nuxt 4.x useNuxtData. Example pattern:

const { data: practiceAreasData } = await useAsyncData('practice-areas', () => $api.practiceAreas.listPracticeAreas())

async function addPracticeArea(newPracticeArea) {
  // Optionally, store previous state for rollback
  const previous = practiceAreasData.value ? [...practiceAreasData.value] : []

  // Optimistically update the array
  practiceAreasData.value = [...(practiceAreasData.value || []), newPracticeArea]

  try {
    await $api.practiceAreas.createPracticeArea(newPracticeArea)
    // Optionally, refresh data from server if needed:
    // await refreshNuxtData('practice-areas')
  } catch (error) {
    // Rollback if the API call fails
    practiceAreasData.value = previous
  }
}

const { data: practiceAreasData } = await useAsyncData('practice-areas', () => $api.practiceAreas.listPracticeAreas())

async function addPracticeArea(newPracticeArea) {
  // Optionally, store previous state for rollback
  const previous = practiceAreasData.value ? [...practiceAreasData.value] : []

  // Optimistically update the array
  practiceAreasData.value = [...(practiceAreasData.value || []), newPracticeArea]

  try {
    await $api.practiceAreas.createPracticeArea(newPracticeArea)
    // Optionally, refresh data from server if needed:
    // await refreshNuxtData('practice-areas')
  } catch (error) {
    // Rollback if the API call fails
    practiceAreasData.value = previous
  }
}

This lets you append new data to the array immediately, providing a responsive UI, and only refetch if necessary. This pattern is recommended in the Nuxt documentation for similar use cases Nuxt 4.x useNuxtData. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

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

Gaming

Programming

Best way to append new data to array from useAsyncData

Did you find this page helpful?