Vue-apollo: Global mutation error handler (interceptor)?

[ZaidBarghouthi]

this error handler doesn't intercept mutation errors

export default new VueApollo({
  defaultClient: client,
  defaultOptions: {
    $query: {
      fetchPolicy: 'cache-and-network',
    },
  },
  errorHandler(error) {
    // works for queries only
  },
});

am I doing something wrong? what is the right way? is there such a thing?

[ZaidBarghouthi]

solved.

const errorHandler = onError(({ networkError, graphQLErrors }) => {
  console.log({ graphQLErrors, networkError})
  if (networkError && networkError.statusCode === 401) {
    window.location = '/login'
  }
})


const client = new ApolloClient({
  link: from([
    // order matters
    acceptJsonMiddleware,
    errorHandler,
    httpLink,
  ]),
  cache,
});

[go4cas]

Thanks, @ZaidBarghouthi!

Was struggling with this.

Now, I can see the errors logged in the console, from the global handler, but how do I access these errors from within a component?

I am using <ApolloQuery> and <ApolloMutation>. For mutations, the error and gqlErrorfrom <template v-slot="{ mutate, loading, error, gqlError }"> is always empty.

Any ideas?

[go4cas]

It seems it works fine for <template v-slot="{ result: { loading, error, data }, query }">, in <ApolloQuery>, but not for mutations.

But, I can see the errors logged in console, for queries and mutations.

[SilentDepth]

Sorry for bothering in this closed issue, but I wonder if there is or will be a global error handler for mutations? The error link solution is sure a way to do that, however since there is already a errorHandler in apollo provider options capturing errors of smart queries and subscriptions, why not expand its ability to cover mutations?

[samuelhgf]

@ZaidBarghouthi Where did you get this function onError? I tried to implment and get onError is not defined

[ZaidBarghouthi]

@samuelhgf,

import { onError } from 'apollo-link-error'

[gustawdaniel]

@ZaidBarghouthi I was trying to use your solution but have

 from is not defined

---

Update: I found solution on page

https://www.apollographql.com/docs/react/data/error-handling/

Thanks for your hint.

[liaoliaojun]

I use concat handlerError link

import {HttpLink} from 'apollo-link-http'
import {onError} from 'apollo-link-error'

const httpLink = new HttpLink({
  uri: 'xxx',
  credentials: 'include',
})

const errorHandler = onError(({ networkError, graphQLErrors }) => {
  console.log({ graphQLErrors, networkError})
})

new ApolloClient({
  link: errorHandler.concat(httpLink),
})

[developernaren]

solved.

const errorHandler = onError(({ networkError, graphQLErrors }) => {
  console.log({ graphQLErrors, networkError})
  if (networkError && networkError.statusCode === 401) {
    window.location = '/login'
  }
})


const client = new ApolloClient({
  link: from([
    // order matters
    acceptJsonMiddleware,
    errorHandler,
    httpLink,
  ]),
  cache,
});

where do you add this code and from where did you import from,acceptJsonMiddleware and httpLink. I just cannot seem to get this working.

[ZaidBarghouthi]

@developernaren

where do you add this code and from where did you import from,acceptJsonMiddleware and httpLink. I just cannot seem to get this working.

import Vue from 'vue'
import VueApollo from 'vue-apollo'
import { ApolloClient } from 'apollo-client'
import { createHttpLink } from 'apollo-link-http'
import { ApolloLink, from } from 'apollo-link'
import { onError } from 'apollo-link-error'
import { InMemoryCache } from 'apollo-cache-inmemory'

Vue.use(VueApollo)

const acceptJsonMiddleware = new ApolloLink((operation, forward) => {
  operation.setContext(({ headers = {} }) => ({
    headers: {
      ...headers,
      accept: 'application/json',
    },
  }))

  return forward(operation)
})

const errorHandler = onError(({ networkError }) => {
  if (networkError) {
    if (networkError.statusCode === 401) window.location = '/auth/login'
    if (networkError.statusCode === 403 && networkError.result.message === 'ACCOUNT_SUSPENDED' ) window.location = '/suspended'
  }
})

const cache = new InMemoryCache()

const httpLink = new createHttpLink({
  uri: '/gql/client',
  credentials: 'include',
})


const apolloClient = new ApolloClient({
  link: from([
    acceptJsonMiddleware,
    errorHandler,
    httpLink,
  ]),
  cache,
})

export default new VueApollo({
  defaultClient: apolloClient,
  defaultOptions: {
    $query: {
      fetchPolicy: 'cache-and-network',
    },
  },
})

This is my apollo.js which exports VueApollo that is used in the Vue instance. Please note that this code is not in production as the project was abandoned more that a year ago. Somethings might have changed.

[developernaren]

@ZaidBarghouthi thanks