With regular HTTP request, we may create redirection with asyncData({error}){…}
What should we use for redirecting to 400 page using Smart Query?
With Vue Apollo, I am trying to use
apollo: {
queryName: {
prefetch: true,
query: wrongQuery,
error(errorData) {
this.$nuxt.error({
statusCode: 500,
message: 'Error message',
});
},
},
};
In case if we reload the page, redirection doesn’t work. We still got an error becouse server side rendering:
With global error handler like:
// /plugins/apollo-error-handler.js
export default ({ graphQLErrors, networkError, operation, forward }, nuxtContext) => {
console.log(networkError)
nuxtContext.error({
statusCode: 404,
message: 'Error message',
});
};
Only errors logging works. Redirection doesn’t work at all.
Do we have any way to handle errors inside smart queries with redirection to 400 page for example?
Can we catch such errors in smart query? Like try…catch… in asyncData() to prevent app crash.
The smart query like this is pretty limited and so, I prefer to handle it in my Vuex store. Not sure if it’s the best practice but it works great for me right now.
Otherwise, yeah using the
onError
link is also a good idea if you feel configuring it: https://www.apollographql.com/docs/react/data/error-handling/