Nested useFetch in Nuxt 3

Question

How do you accomplish nested fetching in Nuxt 3? I have two API's. The second API has to be triggered based on a value returned in the first API.

I tried the code snippet below, but it does not work, since page.Id is null at the time it is called. And I know that the first API return valid data. So I guess the second API is triggered before the result is back from the first API.

<script setup>
  const route = useRoute()
  const { data: page } = await useFetch(`/api/page/${route.params.slug}`)
  const { data: paragraphs } = await useFetch(`/api/page/${page.Id}/paragraphs`)
</script>

Obviously this is a simple attempt, since there is no check if the first API actually return any data. And it is not even waiting for a response.

In Nuxt2 I would have placed the second API call inside .then() but with this new Composition API setup i'm a bit clueless.

Answer 1

You could watch the page then run the API call when the page is available, you should paragraphs as a ref then assign the destructed data to it :

<script setup>
const paragraphs = ref()

const route = useRoute()

const { data: page } = await useFetch(`/api/page/${route.params.slug}`)


watch(page, (newPage)=>{
    if (newPage.Id) {

      useFetch(`/api/page/${newPage.Id}/paragraphs`).then((response)=>{
         paragraphs.value  = response.data

     })
        
    }
}, {
    deep: true,
    immediate:true
})
</script>