Apollo-client: React-apollo failing to connect to server only on Android 7; iOS 11, Android 8.1, etc not vulnerable

[ericLoansnap]

Currently having an issue where Apollo Client requests are not going through on Android 7, but for Android 8.1 and iOS, there are no issues.

`import React from 'react';
import { AppRegistry } from 'react-native';
import { ApolloClient, ApolloProvider, createNetworkInterface } from 'react-apollo';
import createStore from '../Redux'
import AuthActions from '../Redux/AuthRedux'
import MessageActions from '../Redux/MessageRedux'
import Config from 'react-native-config'

function initClientAndStore() {
let apiRoot = 'https://api-ext.dev.marketforces.co/graphql'
if (!__DEV__ && Config.API_ROOT) {
apiRoot = Config.API_ROOT
}

const store = createStore()

const networkInterface = createNetworkInterface({
uri: apiRoot
})

networkInterface.use([
{
applyMiddleware(req, next) {
console.log(req)
next()
}
},
// add auth token if present
{
applyMiddleware(req, next) {
state = store.getState()
authToken = state.auth.authToken
if (!req.options.headers) {
req.options.headers = {}; // Create the header object if needed.
}
if (authToken) {
req.options.headers['authorization'] = Token ${authToken}
}
next()
}
},
])

// If the auth token is bad
// logout and present auth login screen
networkInterface.useAfter([{
applyAfterware({ response }, next) {
if (response.status === 401) {
store.dispatch(AuthActions.logout())
store.dispatch(MessageActions.newMessage({
text: 'Please login',
status: 'error'
}))
// TODO: move login modal to base screen so that
// it can appear over top any screen
store.dispatch(AuthActions.openLoginModal())
}
next();
}
}]);

const client = new ApolloClient({
networkInterface: networkInterface
})

return { client, store }
}

export default initClientAndStore`

Then we later submit a mutation query to graphql:

export const mutation = graphql(gql
mutation functionName($variable1: String!) {
functionName(
variableName: $variableValue
)
{
message
}
}
, { name: 'functionName' } )

This query is submitted by:
this.props.functionName({ variables: { variableName: variableValue }})

Intended outcome:
I should get a message back from our server with the intended reply.

Actual outcome:
Error: Network error: Network request failed
at new ApolloError (apollo.umd.js:1981)
at apollo.umd.js:3091
at apollo.umd.js:3583
at Array.forEach ()
at apollo.umd.js:3580
at Array.forEach ()
at QueryManager.broadcastQueries (apollo.umd.js:3577)
at apollo.umd.js:3047
at tryCallOne (core.js:37)
at core.js:123

How to reproduce the issue:
Use any version of react-apollo (the above is our current use, but I have also done this for react-apollo 2.0. Attempt to make a web request, and the request will fail.

Versions
System:
OS: macOS High Sierra 10.13.4
Binaries:
Node: 10.2.0 - ~/LocalDocuments/mobileRN/node_modules/.bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 6.0.1 - /usr/local/bin/npm
Browsers:
Chrome: 66.0.3359.181
Safari: 11.1
npmPackages:
react-apollo: ^1.1.0 => 1.4.16

[hwillson]

Please try using a more recent version of apollo-client / react-apollo. If this problem still persists, take a look at the Fetch polyfill section of the apollo-link-http docs. You might have to provide your own fetch instance for older platforms. Thanks!

[balwinder4264]

If you are using local host try this 👍

const client = new ApolloClient({
link: new HttpLink({
uri: Platform.select({
ios: 'http://localhost:80/graphql',
android: 'http://10.0.2.2:80/graphql',
}),
}),
cache: new InMemoryCache(),
});