Nuxt3: how two chain two fetches?

Question

I am trying to chain two fetch in Nuxt3, with the second one calling an URL based on the result of the first one and the resulting "variable" to be used in the Vue component.

I'm trying with

<script setup>
const url = "myurl";
const { data } = await useFetch(url);

watch(data, async () => {
  // do something with the result
  url2 = data.value.result
  const variable = await useFetch(url2);
});
</script>

but it looks like the block inside the watch is not able to modify the values of the variables at all (e.g. if I define it outside and try to update it inside, even with hard coded values)

Am I missing something very obvious here?

Answer 1

Something like this works perfectly fine, since all the fetching will be awaited

<script setup>
const { data } = await useFetch('https://jsonplaceholder.typicode.com/todos/1')
console.log('data', data.value.userId)
const { data: photos } = await useFetch(`https://jsonplaceholder.typicode.com/photos/${data.value.userId}`)
console.log('data2', photos.value)
</script>

<template>
  <div>
    first data: {{ data }}
  </div>
  <hr />
  <div>
    photos: {{ photos }}
  </div>
</template>