Nuxt•2mo ago

watch not firing api call

Hello, can somebody help me. Why does the watcher doesn't fire anything ?

//api call
const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(article, (newValue, oldValue) => {
  console.log("hello")
})

//api call
const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(article, (newValue, oldValue) => {
  console.log("hello")
})

But this work :

onMounted(() => {
  if (article.value) {
    //...

onMounted(() => {
  if (article.value) {
    //...

3 Replies

kapa.ai•2mo ago

Hi @Fabien. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- The issue you're experiencing with the watcher not firing is likely related to how useAsyncData works in Nuxt 3. Let me explain the problem and provide a solution: 1. The useAsyncData composable returns a ref, but the watcher is not triggered because the ref itself doesn't change, only its internal value does. 2. To properly watch the changes in the article data, you need to watch the specific property of the returned object. In this case, you should watch article.value instead of just article. Here's how you can modify your code to make the watcher work:

const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(() => article.value, (newValue, oldValue) => {
  console.log("hello")
}, { deep: true })

const { data: article } = await useAsyncData('article', () => contentStore.fetchArticleBySlug(articleSlugID));

watch(() => article.value, (newValue, oldValue) => {
  console.log("hello")
}, { deep: true })

This approach is mentioned in the Nuxt 3 documentation on data fetching (https://nuxt.com/docs/getting-started/data-fetching#watch), which states that you need to watch the exact property or do a deep watch for it to be triggered. Additionally, if you want to re-run your fetching function when other reactive values change, you can use the watch option in useAsyncData itself:

const { data: article } = await useAsyncData(
  'article',
  () => contentStore.fetchArticleBySlug(articleSlugID),
  {
    watch: [articleSlugID]
  }
);

const { data: article } = await useAsyncData(
  'article',
  () => contentStore.fetchArticleBySlug(articleSlugID),
  {
    watch: [articleSlugID]
  }
);

This will automatically re-fetch the data when articleSlugID changes as explained in the Nuxt 3 documentation (https://nuxt.com/docs/getting-started/data-fetching#watch). Remember that watching reactive values won't change the URL fetched, so if you need to change the URL based on a reactive value, you might want to use a computed URL (https://nuxt.com/docs/getting-started/data-fetching#computed-url) instead. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2mo ago

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

FabienOP•2mo ago

Didn't work Apparently, i needed to use "immediate" to true : }, { deep: true, immediate: true })

Gaming

Programming

watch not firing api call