How to catch error in ApolloClient

Issue #192

Read https://www.apollographql.com/docs/react/features/error-handling
How to catch actual error https://github.com/apollographql/apollo-client/issues/4016 🤔

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
import { Observable } from 'apollo-link'
import ApolloClient from 'apollo-boost'
import Token from 'library/models/Token'
import TokenService from './TokenService'
import { TokenRefreshException } from 'library/utils/Exception'

const client = new ApolloClient({
uri: 'https://www.myapp.no/api/',
request: async (operation) => {
const token = await TokenService.loadToken()
updateOperation(operation, token)
},
onError: (error) => {
console.log('ApolloClient error', error)
if (isAuthError(error)) {
return handleAuthError(error)
} else {
return error.forward(error.operation)
}
},
fetchOptions: {
mode: 'no-cors',
}
})

const isValidErrorCode = (statusCode) => {
if (typeof (statusCode) === 'undefined' || statusCode === null) {
return false
} else {
return true
}
}

const isAuthError = (error) => {
console.log('client error', error)
if (error.networkError) {
return error.networkError.statusCode === 401
} else {
return false
}
}

const handleAuthError = (error) => {
return new Observable((observer) => {
TokenService.refreshToken()
.then((token) => {
updateOperation(error.operation, token)
})
.then(() => {
const subscriber = {
next: observer.next.bind(observer),
error: observer.error.bind(observer),
complete: observer.complete.bind(observer)
}

error.forward(error.operation).subscribe(subscriber)
})
.catch((e) => {
observer.error(e)
})
})
}

const updateOperation = (operation, token: Token) => {
const tokenHeader = `${token.token_type} ${token.access_token}`

operation.setContext((context) => {
return {
headers: {
authorization: tokenHeader,
'Content-Type': 'application/json'
}
}
})
}

Comments