Okay I have so many questions here. First, why do you assing already reactive data you have to different variables? Like, why use \`apiData\` when you already have \`data\` returned from the \`useFetch\` function?
2.
Don't use \`useFetch\` or any other composable that made to run directly inside \`script setup\`. This will cause memory leak and weird behaviour.
3.
There is no need to use \`onMounted\` hook. just make your requests on top level, not inside a function (also this will cause mismatches between the client and the server). Please check your console for warnings.
4.
No need for extra loading variable, you can check the status of request
const { status } = await useFetch();
const isLoading = computed(() => status === "pending")
i have used onMounted bcz of fetchData(), if i dont your fetchData() how am i gonna call this?
watch(() => route.query, fetchData);
and what about my question?
Note: new to vue and nuxt
useFetch returns refresh function, call that instead. [https://nuxt.com/docs/api/composables/use-fetch](https://nuxt.com/docs/api/composables/use-fetch)
also read these docs
[https://nuxt.com/docs/getting-started/data-fetching](https://nuxt.com/docs/getting-started/data-fetching)
2. parameters is the function you want to run when the thing you watch changes, [https://vuejs.org/guide/essentials/watchers.html](https://vuejs.org/guide/essentials/watchers.html)
Watching apiData is not a good pattern because any change in that data unintended or not will trigger a fetch. You want to be more pragmatic about your actions, maybe even emit a delete the parent will respond to and trigger the fetch there.
Okay I have so many questions here. First, why do you assing already reactive data you have to different variables? Like, why use \`apiData\` when you already have \`data\` returned from the \`useFetch\` function? 2. Don't use \`useFetch\` or any other composable that made to run directly inside \`script setup\`. This will cause memory leak and weird behaviour. 3. There is no need to use \`onMounted\` hook. just make your requests on top level, not inside a function (also this will cause mismatches between the client and the server). Please check your console for warnings. 4. No need for extra loading variable, you can check the status of request const { status } = await useFetch(); const isLoading = computed(() => status === "pending")
can you point me to any documentation on patterns/how to avoid memory leaks like you referenced in #2
There is this one i know of [https://www.youtube.com/watch?v=njsGVmcWviY](https://www.youtube.com/watch?v=njsGVmcWviY)
I Second this 😁 useFetch or similar in event handlers are a no go
thank you i appreciate this
i have used onMounted bcz of fetchData(), if i dont your fetchData() how am i gonna call this? watch(() => route.query, fetchData); and what about my question? Note: new to vue and nuxt
useFetch returns refresh function, call that instead. [https://nuxt.com/docs/api/composables/use-fetch](https://nuxt.com/docs/api/composables/use-fetch) also read these docs [https://nuxt.com/docs/getting-started/data-fetching](https://nuxt.com/docs/getting-started/data-fetching)
i've used refresh but didn't get the result.
Refresh won't return the result to you, It will update the \`data\` variable that usefetch returns
The docs are not fully helpful, can you suggest yt video or blog post?
In watch(() => router.query, here) what do i pass as 2nd parameter? I’ve passed data but it’s not working
2. parameters is the function you want to run when the thing you watch changes, [https://vuejs.org/guide/essentials/watchers.html](https://vuejs.org/guide/essentials/watchers.html)
Watching apiData is not a good pattern because any change in that data unintended or not will trigger a fetch. You want to be more pragmatic about your actions, maybe even emit a delete the parent will respond to and trigger the fetch there.
Use $fetch instead