[Modern] <QueryRenderer> is never rendered with props after successful fetch (Android React Native)

[lukewlms]

Fetch succeeds, graphql response is properly formed, and render() is called after the fetch as expected - but props is always null. So the Loading UI displays perpetually.

Note that when we attach the debugger, props does get filled - making this a pretty bad Heisenbug for us. App also works perfectly in iOS, just not Android without a debugger.

How can we determine why props is not loaded? Is there some kind of race condition that can occur, and attaching the debugger slows things down enough for props to be loaded?

[lukewlms]

Verified that relayPayload.source is properly populated in RelayNetwork.js:70 (in the case of "correct fetch, no render" that we're trying to solve).

[lukewlms]

Verified that there are no payloads to commit after a successful fetch, at the top of RelayPublishQueue.commitPayloads.

[lukewlms]

Very weird behavior - this._pendingPayloads does get initialized, but in commitPayload and _commitPayloads, this._pendingPayloads.size returns undefined.

With the debugger attached, this._pendingPayloads.size returns 0 or 1 as expected.

[lukewlms]

Verified that (only without debugger attached and on Android) _pendingPayloads is not initialized correctly.

This code prints "undefined" in that case, "0" in all others:

this._pendingPayloads = new _set2['default']();
console.log('STARTING size: ' + this._pendingPayloads.size);

[lukewlms]

Edit: found a check-in for core-js that fixes this bug.

zloirock/core-js#298

@josephsavona Joe, this line in RelayPublishQueue.js is creating different objects in the "RN Android with no debugger attached" case vs all other cases (iOS or no debugger).

var _set2 = _interopRequireDefault(require('babel-runtime/core-js/set'));

In the correct case it creates an object with a _c field which is a Set. In this case the .size getter works as expected.

In the incorrect case the _c field is an Object, .size returns undefined, and _JSON.stringify(obj._c) shows:

_c: {"_map":{"_mapData":[],"_objectIndex":{},"_stringIndex":{},"_otherIndex":{}},"size":0}

Going deeper, _collection.js in core-js/library/modules provides a size function in the good case, and does not in the bad case. I'm getting pretty deep in the weeds here, can you shed light on why .size is undefined and Relay breaks in the cases I'm describing?

Thanks a lot for your help.

[lukewlms]

Ok - RN docs re: JavaScript environment specify that Chrome debugging is a different execution environment from Android when not debugging.

That must mean something about my Android environment is causing _set2 construction to omit the size parameter and Modern doesn't work.

Is it possible a different version of JavaScriptCore is running in Android and so I get different Set setup behavior? I would def like a solution that will not break for some of my users on certain versions of Android!

[lukewlms]

Fixed by adding this polyfill.

Took 5 hours of investigation to figure out why Android just doesn't work in Relay Modern 1.0.0, so will submit an update to the docs.

[josephsavona]

Hmm. There shouldn't be anything special about Relay and Set. If there is, we should fix it asap rather than add a warning.

[josephsavona]

Thanks so much for investigating this! Cc @leebyron and @kassens.

[nodkz]

Cc @leebyron (Joseph wanted to mention you not some other github's leeb)

[petersuwara]

From #1704 thanks to @gusbicalho.

I added the following to my index.android.js before the AppRegistry. This fixed my props issue and got the props getting rendered correctly.

(function(PolyfillSet) {
  if (!PolyfillSet) {
    return;
  }
  var testSet = new PolyfillSet();
  if (testSet.size === undefined) {
    if (testSet._c.size === 0) {
      Object.defineProperty(PolyfillSet.prototype, 'size', {
        get: function() {
          return this._c.size;
        },
      });
    }
  }
})(require('babel-runtime/core-js/set').default);

[lukewlms]

@leebyron @kassens To summarize:

Relay Modern doesn't work with React Native on Android

• PR to fix this in core-js is here.
• core-js issue description here

Possible fixes:

• Include polyfill for size() (our current solution)
• Don't rely on set.size()
• Use a different set implementation without this limitation

core-js hasn't released a new version since summer 2016 so I don't think this can be fixed with a new version of that lib.

[lukewlms]

Closing since @leebyron indicated: "Set polyfill will no longer be included in the next release."

[danny-larsen]

I have this problem on a new react native project. Adding the script above does not work. Any ideas?