Nuxt•3y ago

Redirect user when useFetch fails

I'm trying to figure out how to redirect the user when useFetch fails. For example I have:

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  }
})
</script>

Here I'm using the route param id the fetch a certain product. However, if I change the route param to an invalid id, the useFetch will fail and I want to redirect the user away from the page.

How can I achieve this? I have tried the following without result:

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

<script setup>
const route = useRoute()
const { data } = useFetch('/api/products', {
  query: {
    id: route.params.id
  },
  onResponseError() {
    const router = useRouter()
    router.push('/')
  }
})

// More code here
</script>

This doesn't seem to stop the rest of my script inside of

<script setup>

<script setup>

<script setup>

<script setup> from executing.

DDragonBallZ @Daemon You can try this example that I have just made https://stackblitz.com/ed...

VonoxOP•1/17/23, 2:37 PM

Great example! However errorerror seems to be nullnull in my template. I'm not exactly sure how to throw an error from my API endpoint, any idea?

Right now it looks something like this:
server/api/products.js

import { firestore } from '../utils/firebase'

export default defineEventHandler(async event => {
  const query = getQuery(event)

  const snapshot = await firestore.collection('products').doc(query.id).get()

  if (snapshot.exists) {
    // code
  } else {
    throw new Error(`Product with id ${query.id} does not exist`)
  }
})

import { firestore } from '../utils/firebase'

export default defineEventHandler(async event => {
  const query = getQuery(event)

  const snapshot = await firestore.collection('products').doc(query.id).get()

  if (snapshot.exists) {
    // code
  } else {
    throw new Error(`Product with id ${query.id} does not exist`)
  }
})

VonoxOP•1/17/23, 2:37 PM

I can see my error message in the console, but other than that nothing happens

DDragonBallZ https://stackblitz.com/edit/github-hqexe9?file=app.vue,server%2Fapi%2Fproducts.g...

VonoxOP•1/17/23, 6:12 PM

Works like a charm! Thank you very much

Redirect user when useFetch fails

Similar Threads

Similar Threads

Similar Threads