Search code examples
vue.jsgraphqlvue-routervue-apollo

Redirect to an error page when API is unavailable

I'd like to redirect to an error page when my GraphQL API is down instead of showing an empty page because the content couldn't load. enter image description here

I think I have to do the redirection when Apollo receives an error 503 as a reply but I don't know how I can do that.

Thank you !

Solution

  • You can handle the error with this, in your apollo query.

     apollo: {
    todos: {
      query: GET_MY_TODOS,
      error(error) {
      console.log(error)
      this.$router.push('/db-error-page')
     }
    },
  },