Requests (headers?) getting changed and failing when debugging

[schumannd]

I can not provide a working example, as it is quite the complex setupe (with specific backend config etc.) it also disappeared after switching to google chrome and back.

But I got a 401 authentication error, despite the authentication token being sent correctly when not using the React Native Debugger. So it seems like something messy going on with the HTTP headers.

[Umesh-Iyer]

I seem to be having similar issues. I've the following line added in a App.js

 import unfetch from 'unfetch';
 global.XMLHttpRequest = global.originalXMLHttpRequest ? global.originalXMLHttpRequest : global.XMLHttpRequest;

With this line I am able to see Network Requests in the Debugger. However the Debugger seems to strip the request data. When I expand the data I see Request Payload with two Objects.

However my backend server shows $_REQUEST being empty causing the API to fail. We are able to observe the RESPONSE from the server in both the debugger and our App's error handler.

When I disable the above import and global.XMLHttpRequest lines in App.js, the network request goes through with the $_REQUEST payload fine, however I am unable to Observe the network traffic in debugger. Our App receives the response and works well.

Environment iOS App on iPhone 11 (13.6) Simulator React Native Debugger 0.11.4 react-native-cli: 2.0.1 react-native: 0.63.2

[hixus]

We seem to have similar issue with latest expo, apollo and axios. Apollo debug works fine without "network debug" but if we want to see what happens with axios requests enabling "network debug" messes the requests and brakes apollo auth.

[hixus]

I think the issue is related to https://github.com/jhen0409/react-native-debugger/issues/432.

Unfetch solution did not work but I managed to get it working by lazy initialization of apollo client. So our apollo client init file is like below (using typescript but js is pretty much the same).

// src/apollo.ts
let client: ApolloClient<NormalizedCacheObject>;

const initApolloClient = () => {
  const httpLink = new HttpLink({
    uri: GRAPHQL_ENDPOINT,
  });

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

  return new ApolloClient({
    cache: new InMemoryCache(),
    link,
  });
};

export const getApolloClient = () => {
  if (!client) client = initApolloClient();
  return client;
};