Intended outcome:
`import {ApolloClient} from 'apollo-client'
import {InMemoryCache} from 'apollo-cache-inmemory'
import {RestLink} from 'apollo-link-rest'
import {AUTH_TOKEN, ENDPOINT_URL, REFRESH_TOKEN, VALIDATION_COMPLETE} from '../../appConstants'
import {from} from 'apollo-link'
import {setContext} from 'apollo-link-context'
import {AsyncStorage} from 'react-native'
import ApolloLinkTimeout from 'apollo-link-timeout'
import {FetchPolicy} from 'apollo-client/core/watchQueryOptions'
import ErrorHandler, {onError} from 'apollo-link-error'
import {runRefreshToken} from './login'
import {promiseToObservable} from './promiseToObservable'
import {replace} from '../../NavigationService'
import i18n from 'i18n-js'
const timeoutLink = new ApolloLinkTimeout(30000) // 30 second timeout
const authMiddleware = setContext(async (_, {headers}) => {
const token = await AsyncStorage.getItem(AUTH_TOKEN)
return {
headers: {
...headers,
authorization: token ? Bearer ${token}
: ''
},
}
})
const restLink = new RestLink({
uri: ENDPOINT_URL,
headers: {
'accept': 'application/json',
}
})
const networkErrorLink = onError((errorResponse: ErrorHandler.ErrorResponse) => {
const {
networkError,
forward,
operation
} = errorResponse
if ('statusCode' in networkError && 'response' in networkError) {
const {
statusCode,
response: {
url
}
} = networkError
if (url.includes('token/refresh')) {
AsyncStorage.multiRemove([AUTH_TOKEN, REFRESH_TOKEN, VALIDATION_COMPLETE])
.then(() => apolloClient.resetStore())
.then(() => replace('SignIn'))
.catch()
} else if (statusCode && statusCode === 401) {
return promiseToObservable(AsyncStorage.getItem(REFRESH_TOKEN)
.then(refreshToken => runRefreshToken(refreshToken))
.then(response => {
const {
data: {
refreshToken: {
access
}
}
} = response
return AsyncStorage.setItem(AUTH_TOKEN, access)
})
.then(() => AsyncStorage.getItem(AUTH_TOKEN))
.then(authToken => {
const oldHeaders = operation.getContext().headers
operation.setContext({
headers: {
...oldHeaders,
authorization: authToken
}
})
})
.catch())
.flatMap(() => forward(operation))
} else if (statusCode && statusCode >= 400 && statusCode < 600) {
return promiseToObservable( Promise.reject({message: i18n.t('ERROR_500')}))
}
}
return forward(operation)
})
const timeoutHttpLink = timeoutLink.concat(restLink)
export const apolloClient = new ApolloClient({
link: from([networkErrorLink, authMiddleware, timeoutHttpLink]),
cache: new InMemoryCache(),
defaultOptions: {
watchQuery: {
fetchPolicy: 'network-only',
errorPolicy: 'ignore',
},
query: {
fetchPolicy: 'network-only',
errorPolicy: 'all',
},
mutate: {
errorPolicy: 'all'
}
},
connectToDevTools: false
})
export function runQuery(query: string, variables: any = null, fetchPolicy: FetchPolicy = 'network-only') {
return (apolloClient.query({
query: query,
variables: variables,
fetchPolicy: fetchPolicy
}).then(response => {
if (__DEV__) {
console.log(response.data)
}
apolloClient.cache.writeData({data: response.data})
return Promise.resolve(response)
}).catch((error) => {
if (__DEV__) {
console.log(error)
}
return Promise.reject(error)
})
)
}
`
Actual outcome:
Hi Apollo team! We use the 'react-apollo' library in our react-native project. iOS works well but on Android if there isn't any network connection and we try to run some query or mutation we get this error. This issue reproduces on Android 8 and Android 9.
https://ibb.co/1rXgrn7
How to reproduce the issue:
If there isn't any network connection on Android this error happens.
Versions
System:
OS: macOS Mojave 10.14.4
Binaries:
Node: 8.12.0 - /usr/local/bin/node
Yarn: 1.12.3 - /usr/local/bin/yarn
npm: 6.4.1 - /usr/local/bin/npm
Browsers:
Chrome: 73.0.3683.103
Safari: 12.1
npmPackages:
apollo-boost: ^0.3.1 => 0.3.1
apollo-link-context: ^1.0.17 => 1.0.17
apollo-link-rest: ^0.7.2 => 0.7.2
apollo-link-timeout: ^1.2.1 => 1.2.1
react-apollo: ^2.5.4 => 2.5.4
any updates???
Still no solutions and reasons why that's happening?
Are you using reactotron? Maybe see this. https://github.com/infinitered/reactotron/issues/786
react native version: 0.59.9; apollo-*: latest version!
The error still exists!
I'm using react-native 0.59.10 and just updated my reactotron-react-native to the latest version (3.6.4 right now) and solved the issue.
Most helpful comment
Still no solutions and reasons why that's happening?