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.

Nuxt•2y ago•

3 replies

nathan1658

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>

Question about tranform with useFetch

Similar Threads

Question about tranform with useFetch

Similar Threads

Similar Threads

Similar Threads