Network inspector, failling with graph ql request

[horaciomoreno11]

Hi!, a few weeks ago, i was trying to update react native version, but at the moment to test the application, to see that all works right, I could detect that when active the network inspector on react native debugger, the request related with graphql is falling, and not throw errors on the debugger, only fails on the application. To see this issues i was decide to stand by this update until the issues was fixed. Today i find me only update the react native debugger and this issue started to happend Any idea, how this affect the request related to graphql?

React Native Debugger app version: 0.10.4 React Native version: 0.60.5 Platform:Both Is real device of platform: Yes Operating System: macOS

[neiker]

Same issue.

With network inspector enabled response body is empty.

The issue starts on v0.10.3 with ed47a76 a9e4a9f by @jhen0409

[appmux]

Response body shows up as empty in the network inspector and network calls time out on the application side.

This is happening for quite a while now, was hoping to get that fixed with the latest update today but that did not help.

[neiker]

Now it stated to happen also on 0.10.2, I don't understand why.

System:
    OS: macOS 10.15.1
    CPU: (8) x64 Intel(R) Core(TM) i7-8559U CPU @ 2.70GHz
    Memory: 1.03 GB / 16.00 GB
    Shell: 5.7.1 - /bin/zsh
  Binaries:
    Node: 12.3.1 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.2 - /usr/local/bin/npm
    Watchman: 4.9.0 - /usr/local/bin/watchman
  SDKs:
    iOS SDK:
      Platforms: iOS 13.2, DriverKit 19.0, macOS 10.15, tvOS 13.2, watchOS 6.1
    Android SDK:
      API Levels: 28, 29
      Build Tools: 28.0.3, 29.0.0
  IDEs:
    Android Studio: 3.4 AI-183.6156.11.34.5522156
    Xcode: 11.2.1/11B500 - /usr/bin/xcodebuild
  npmPackages:
    react: 16.9.0 => 16.9.0 
    react-native: 0.61.4 => 0.61.4 
  npmGlobalPackages:
    react-native-asset: 2.0.0
    react-native-cli: 2.0.1```

[traviswimer]

I believe I found a fix for this issue. It seems to be timing related. The problem for me was with how I was using apollo-link-http. I was calling createHttpLink() at the very beginning, outside of any components. react-native-debugger replaces some of the global XHR/ajax methods so the network tab can read the requests, and I believe the problem arises when createHttpLink() is called before these global variables are overridden.

I was able to solve the issue by moving my call to createHttpLink() inside my highest level React component's componentDidMount(). (Presumably you should be able to do this inside a useEffect() as well.)

Another option that seemed to work (although I'm not entirely sure why) is to pass your own polyfill (I used unfetch) for fetch to createHttpLink(), like this:

import unfetch from 'unfetch';

createHttpLink({
  uri: "https://SOMEURL",
  fetch: unfetch
})

I'm still not sure exactly where the problem is occurring within react-native-debugger though. I'm not sure if its possible to fix this within react-native-debugger, simply because of how it works. It would be nice if there was some way to at least log a warning in this case, but I have no idea how to detect when this problem is occurring.

[truseed]

import unfetch from 'unfetch';

createHttpLink({
  uri: "https://SOMEURL",
  fetch: unfetch
})

The above solution worked perfectly. I much prefer it to the other solutions modifying the global object.

[Xianbei233]

with normal fetch way,just make origin fetch replaced by polyfilled fetch like unfetch,and we will see the response body in network inspector

import unfetch from 'unfetch';

export default function enableDevTool() {
  const isDev = __DEV__;
  if (isDev) {
    global.XMLHttpRequest = global.originalXMLHttpRequest
      ? global.originalXMLHttpRequest
      : global.XMLHttpRequest;
    global.FormData = global.originalFormData
      ? global.originalFormData
      : global.FormData;
    fetch = unfetch; // Ensure to get the lazy property
    if (window.__FETCH_SUPPORT__) {
      // it's RNDebugger only to have
      window.__FETCH_SUPPORT__.blob = false;
    } else {
      /*
       * Set __FETCH_SUPPORT__ to false is just work for `fetch`.
       * If you're using another way you can just use the native Blob and remove the `else` statement
       */
      global.Blob = global.originalBlob ? global.originalBlob : global.Blob;
      global.FileReader = global.originalFileReader
        ? global.originalFileReader
        : global.FileReader;
    }
  }
}

and use it in you app entry,document should update

[lindskogen]

Copy-pasta for people who doesn't want to use unfetch just to get this working:

// @ts-ignore
const myFetch = (...args: any[]) => global.fetch(...args);

const httpLink = createHttpLink({
  uri: "http://localhost:5000/graphql",
  fetch: myFetch,
});

[gmavritsakis]

Copy-pasta for people who doesn't want to use unfetch just to get this working:

// @ts-ignore
const myFetch = (...args: any[]) => global.fetch(...args);

const httpLink = createHttpLink({
  uri: "http://localhost:5000/graphql",
  fetch: myFetch,
});

This works perfectly! Clean and simple!