nathan1658
nathan1658
NNuxt
Created by nathan1658 on 8/30/2024 in #❓・help
Best Practices for Handling Non-Existent API Routes in Nuxt3
Hi everyone, I'm in the process of refactoring my project, during which I updated my existing API under /api. However, there seems to be no error or typing for both $fetch and useFetch, indicating that the API route being called no longer exists. What is the best way to achieve this purpose? Is it possible to get a type error for this? Thank you.
2 replies
NNuxt
Created by nathan1658 on 8/14/2024 in #❓・help
Question about tranform with useFetch
I've noticed an inconsistency in how the transform function of useFetch behaves in Nuxt 3. Here's a minimal example to illustrate:
<template>
<div>
<button @click="$router.push('/')">Go Back</button>
<div>{{ data }}</div>
</div>
</template>

<script setup>
const { data } = useFetch('/api/test', {
transform: (res) => {
console.log('Transform executed')
return res
},
})
</script>
<template>
<div>
<button @click="$router.push('/')">Go Back</button>
<div>{{ data }}</div>
</div>
</template>

<script setup>
const { data } = useFetch('/api/test', {
transform: (res) => {
console.log('Transform executed')
return res
},
})
</script>
I've observed that: 1. When I refresh the page, the transform function executes on the server-side. 2. When I navigate to this page from another page using Vue Router (e.g., $router.push()), the transform function executes on the client-side. Is this the expected behavior? If so, what's the rationale behind it? Thank you.
4 replies