Graphql-tools: Document that Symbol polyfill is required to use in React Native/old browsers

[ManAnRuck]

I try to mocking queries on client side (for developing).
it works on web and iOS. on android I get the following message only by adding this line in code without other changes.

import { makeExecutableSchema, addMockFunctionsToSchema } from 'graphql-tools';

Can't find variable: Symbol <unknown> errors.js:13:26 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> defaultMergedResolver.js:5:23 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> makeRemoteExecutableSchema.js:44:38 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> index.js:3:43 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> index.js:8:17 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> client.js:5 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> index.js:4 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> App.js:3 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:138:36 _require require.js:118:20 <unknown> index.android.js:1 loadModuleImplementation require.js:191:12 guardedLoadModule require.js:131:45 _require require.js:118:20 global code

here is a link to the branch to try it
https://github.com/demokratie-live/democracy-client/tree/GraphQL

[stubailo]

Looks like RN doesn't have Symbol: https://github.com/apollographql/graphql-tools/blob/3e4b61a6111ecb724efab5668115cdee08563057/src/stitching/errors.ts#L4

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol

Looks like this is an issue with React Native: https://github.com/facebook/react-native/issues/4676

A fix is suggested here: https://github.com/facebook/react-native/issues/4676#issuecomment-340290485

Maybe we can just add docs for the relevant polyfill? It's supported in all modern browsers so it seems silly to avoid using Symbol just for React Native.

[kbrandwijk]

That fix introduces other errors, as mentioned in the same thread. Those issues are still not fixed. Since RN is notioriously slow in fixing stuff, I'm afraid the solution needs to be on the side of graphql-tools.

[stubailo]

Is there any way to polyfill Symbol in React Native? That would definitely be my preference.

We could certainly stop using it in this package, but I'd really prefer to be able to rely on modern JavaScript stuff if we can. Maybe let's take a day to look for that solution, and then we can maybe have a PR to remove Symbol if we don't find any external solution.

[giautm]

Here is a polyfill can be use https://github.com/seanmonstar/symbol/blob/master/README.md

[stubailo]

@kbrandwijk I think that bug has been fixed: https://github.com/facebook/react-native/issues/11968

[stubailo]

Can anyone try the fix on React Native, and see if it resolves the issue? If so, we can add a section to the docs.

[giautm]

Yep, it works on React-Native 0.51. https://snack.expo.io/@giautm/symbol-test

@ReggaePanda : which version of react-native are you using?

[kbrandwijk]

From his repo: 0.51.0
https://github.com/demokratie-live/democracy-client/blob/master/package.json#L29

[stubailo]

Awesome, someone want to send a PR here? Right under the install directions I'd put a small "polyfills" heading: https://github.com/apollographql/graphql-tools/blob/master/docs/source/index.md

[ManAnRuck]

@giautm this is the output from react-native info

Environment:
  OS: macOS High Sierra 10.13.2
  Node: 9.3.0
  Yarn: 1.3.2
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: 3.0 AI-171.4443003

Packages: (wanted => installed)
  react: 16.0.0 => 16.0.0
  react-native: 0.51.0 => 0.51.0

[wKovacs64]

@stubailo Symbol polyfills conflict with React Native's own Set polyfill, leading to some really obscure and hard-to-troubleshoot bugs. For example, polyfilling Symbol in a fresh RN project (0.51.0, 0.52.2, and 0.53.0-rc.0) results in the following error on Android:

Invariant Violation: Objects are not valid as a React child (found: object with keys {$$typeof, type, key, ref, props, _owner, _store}). If you meant to render a collection of children, use an array instead.

(Note: it works in Expo, so they must be doing something to accommodate.)

It would be a lot less painful for RN developers (which I would think make up a large portion of Apollo users, given GraphQL's benefits on mobile) if the use of Symbol was temporarily removed from graphql-tools until RN has resolved the Symbol situation (although I completely understand why you'd prefer an alternative solution - I would too 🤷‍♂️ ).

[freiksenet]

Should be fixed in next version.