Search code examples
vue.jsapollonuxt.jsapollo-clientvue-apollo

Intercepting network errors on apollo-module using Nuxt


I'm using nuxt with apollo-module and I need to intercept possible network errors (401/403's to be more specific) so I can show some error modal and log out my user. In the documentation I see that inside the nuxt.config.js you can do like:

  apollo: {
    tokenName: 'Authorization',
    authenticationType: 'Bearer',
    errorHandler(error) { do something }
  }
...

But inside that config file, I can't access the app features that I need (like a errors modal or my router, for instance). Is there any way to archive it?


Solution

  • You can use apollo-error-link

      apollo: {
        clientConfigs: {
          default: '~/apollox/client-configs/default.js'
        }
      },
    

    And here config

    import { onError } from 'apollo-link-error'
    
    export default function(ctx) {
      const errorLink = onError(({ graphQLErrors, networkError }) => {
    
      })
      return {
        link: errorLink,
    
        // required
        httpEndpoint: ctx.app.$env.GRAPHQL_URL,
    
        httpLinkOptions: {
          credentials: 'same-origin'
        },
      }
    }