Graphql Network Error on release version of react-native android app

Question

I have developed a react-native android app that uses graphql and I can connect to the graphql server as well as perform mutations and queries but only on the debug version of the app. The problem arises when I build the release version of the app and run it on my phone. On performing the login mutation, I face
'networkError: ', '{"line":123,"column":7285,"sourceURL":"index.android.bundle"}'

Graphql initialization code,

const httpLink = createHttpLink({
  uri: 'https://<IP>:4050'
})

const authLink = setContext((_, { headers }) => {
  getMyValue(AUTH_TOKEN)
  return {
    headers: {
      ...headers,
      authorization: token ? `Bearer ${token}` : ''
  }
})

const client = new ApolloClient({
  link: authLink.concat(httpLink),
  cache: new InMemoryCache()
})

This is the component that throws the error,

<Mutation
                mutation={gql`
                  mutation login($username:String!,$password:String!){
                    login(username:$username,password:$password)
                  }
                `}
                variables={{ username, password }}
                onError={(err) => {
                  console.log('err: ', err);
                }}
                onCompleted={data => {...}}
              >
                {mutation => (
                  <Button full style={styles.loginButton}
                    onPress={() => {
                        mutation()
                    }}>
                      <Text>Login</Text>
                  </Button>
                )}
              </Mutation>

On the debug version of the application, it goes to the onCompleted block of code which is what I want for the release version of the application also. Instead, on the release version of the app, it goes to the onError block of code and throws the network error.

Answer 1

Add this line in your android manifest Application tag

android:usesCleartextTraffic="true"