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.

maybe it helps [link] (github.com/apollographql/apollo-client/issues/…) — Lord Pooria
– Lord Pooria, Commented Feb 2, 2020 at 6:41
Thanks, that was the same solution I came to but a better solution would be through a network security configuration file. — Dylan Pereira
– Dylan Pereira, Commented Feb 12, 2020 at 5:05

Peyman Mohamadpour · Accepted Answer · 2020-05-04 00:20:33Z

2

Add this line in your android manifest Application tag

android:usesCleartextTraffic="true"

edited May 4, 2020 at 0:20

Peyman Mohamadpour

18k24 gold badges94 silver badges102 bronze badges

answered May 3, 2020 at 19:10

GIRIRAJ NAGAR

2012 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

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

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related