Best practice way to handle and redirect 50X and 404 errors when querying sanity fetch

[toddpadwick]

Hey Nuxt Sanity team! I am looking for advice on error handling: When I query a page entry using the slug, I will need a way to do the following:

• Redirect to the nuxt 404 error page if the query returns empty
• Redirect and render the appropriate error when the query returns a 50X error

I am new to this module and I am not sure how best to do this. Can anyone share their method for doing so?

I am using Nuxt 3.0.0-rc.11 and Nuxt/sanity ^1.3.0

[danielroe]

You probably want to do something like this: https://v3.nuxtjs.org/api/utils/create-error#throwing-errors-in-your-vue-app. There is also an error property returned by useSanityQuery which will contain the error (if you are using it on the server, or if the error has occurred on the client).

[danielroe]

I'm closing this issue as I think I've answered it, but do let me know if I can be of any more help.

[toddpadwick]

Hi @danielroe apologies for the late response – been a busy few weeks. Thank you so much for this. I haven't had a chance to give it a go, but it certainly makes sense and I'm sure it answers my problem.

[toddpadwick]

@danielroe just looking at this now, but still having some difficulties (apologies for my ignorance here) – the sanity query docs are pretty light – I understand its a wrapper for AsyncData so tried to get my head around it from the nuxt async data docs but still a little unsure what I am doing wrong. From what I gather, the following should be about right?

const { pending, data:entry, error } = await useSanityQuery(query);
  console.log(pending); // returns null - should return true and then false
  console.log(error); // returns null - should return an object containing status
  if (error?.status !== '200') {
    throw createError({statusCode:error.status})
  } else if (!entry) {
    throw createError({statusCode:404})
  }

However, it's not working as I'd expect:

• I'd expect pending to return true or false but it returns null.
• I'd expect the error object to return {status:200} but it also returns null.

Can you tell me where I am going wrong?

[danielroe]

Those are each refs, so you wouldn't directly check pending, error.status or entry - instead, you'd check error.value, pending.value and entry.value.

I can't reproduce the issue with your code (updated below and running in this module's playground) but if you provide a reproduction I'll happily take a look:

const { data: movies, pending, error } = await useAsyncData<QueryResult[]>('movies', () => sanity.fetch(query))
console.log(({ pending: pending.value, error: error.value, movies: movies.value }))

[toddpadwick]

That worked @danielroe thank you. One last question though – the error doesn't provide an error status code – it's just a boolean. How do determine the status code? It would be good to display a different error message based on whether it's a network error as opposed to a server error?

[danielroe]

You can follow nuxt/framework#8521 - when this is merged, you can....