Apollo-client: Network error on android signed apk

[LauraBeatris]

Intended outcome:

The queries should be executed as expected, without raising network errors.

Actual outcome:

There are happening network errors when executing the queries, even with a valid network connection.

How to reproduce the issue:

• Setup apollo on an RN app, with the following config:

import {
  ApolloLink,
  ApolloClient,
  InMemoryCache,
  createHttpLink,
} from "@apollo/client";
import { setContext } from "@apollo/client/link/context";
import { buildSentryErrorLink } from "apollo-sentry-helper";

import getApiUri from "./getApiUri";

import { getUserJWT } from "~/utils/getUserJWT";

export const API_URI = getApiUri();

const httpLink = createHttpLink({ uri: API_URI });

const authLink = setContext(async (_req, { headers }) => {
  const token = await getUserJWT();

  return {
    ...headers,
    headers: {
      authorization: token ? `Bearer ${token}` : null,
    },
  };
});

const sentryErrorLink = buildSentryErrorLink();

const link = ApolloLink.from([
  sentryErrorLink,
  authLink,
  httpLink,
]);

const cache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        viewer: {
          merge: (existing, incoming, opts) => (
            opts.mergeObjects(existing, incoming)
          ),
        },
      },
    },
  },
});

const apolloClient = new ApolloClient({
  cache,
  link,
});

export default apolloClient;

• Executes a query on an Android signed apk

Versions
System:
OS: macOS 10.15.6
Binaries:
Node: 12.16.3 - ~/.nvm/versions/node/v12.16.3/bin/node
Yarn: 1.22.4 - /usr/local/bin/yarn
npm: 6.14.4 - ~/.nvm/versions/node/v12.16.3/bin/npm
Browsers:
Chrome: 85.0.4183.121
Safari: 14.0

[LauraBeatris]

It only happens on Android, which is really strange. What would affect only one platform? The apollo client settings should work the same for both

[gabrielpra1]

I'm also having the same problem. The error happens randomly, something the queries fail and sometimes they don't. It seems that it is more likely to happen in the first query that is executed right after opening the app.

Also important to note that we're using HTTPS.

[johnneuland]

I am getting the same error. All my queries work well in iOS but give me a network request failed error in Android. Some other SO and GitHub solutions suggested that I shouldn't be using localhost for my uri and should use my computer's IP address. But I am already not using localhost.

const httpLink = createHttpLink({
    uri: 'https://gateway_dev.companyName.en/v1/graphql',
  });

  const authLink = setContext(async (_, { headers }) => {
    const token = await auth().currentUser?.getIdToken();
    return {
      headers: {
        ...headers,
        authorization: token ? `Bearer ${token}` : '',
      },
    };
  });

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

  return (
    <Provider store={store}>
        <ApolloProvider client={client}>
...

The uri I am using is the Graphql Endpoint POST url from my Hasura console. I am testing by using an Android emulator from the Android Studio and not on a real device. What else could I try?

I also tried adding this android:usesCleartextTraffic="true" to AndroidManifest.xml file but it doesn't make a difference.

[pedro-lb]

Having the same issue here - same scenario randomly happens only on Android with a signed APK, while using https.

[LauraBeatris]

@joebernard We've tried to add a permission for the network state on AndroidManifest.xml but it didn't work either.

And android:usesCleartextTraffic="true" should only work for http not https

[anandbatjargal]

+1
I am also having similar network issues on Android.

I have a React Native Expo project that's using Apollo Client, useQuery/useMutation.

Everything works fine with iOS, but not Android. Though I am setting the backend to a localhost....

Is is possible to set android:usesCleartextTraffic="true" in Expo?

[LauraBeatris]

@anandbatjargal Just for bare workflows. You aren't able to access the AndroidManifest.xml file in managed expo apps since it doesn't expose the native code.