Nested useFetch in Nuxt 3

user_219443 0
Viewed 1450

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.

nuxtjs3 nuxt.js vuejs3 vue-composition-api vue.js
2 Answers

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>
user_81728570

One solution is to avoid using await. Also, use references to hold the values. This will allow your UI and other logic to be reactive.

<script setup>
  const route = useRoute()
  const page = ref()
  const paragraphs = ref()
  useFetch(`/api/page/${route.params.slug}`).then(it=> {
     page.value = it
     useFetch(`/api/page/${page.value.Id}/paragraphs`).then(it2=> {
        paragraphs.value = it2
     }
  }
</script>
user_50939610
Related