Remove top-level react-dom/server import to fix #2592.

Supersedes #2593.
Should fix #2592.

By pushing the react-dom/server import down into the relevant functions
that need it, we can avoid unconditionally importing that dependency tree,
which helps in environments like React Native where react-dom/server
either doesn't work or seems undesirable (see discussion in #2592).

Since the React Native bundler will still try to traverse the
require("react-dom/server") dependencies, it's important to prune that
dependency with a

  "react-native": {
    "react-dom/server": false
  }

section in react-apollo/package.json. Note that this does not prevent
React Native apps from using getMarkupFromTree with an appropriate
renderFunction; it simply prevents React Native's bundler from bundling
the react-dom/server dependency just because react-apollo is imported.

Tested with both [email protected] and @0.57.7 (Expo SDKs 30 and 31).

Author: benjamn

package.json

@@ -12,6 +12,9 @@
   ],
   "license": "MIT",
   "main": "lib/react-apollo.umd.js",
+  "react-native": {
+    "react-dom/server": false
+  },
   "module": "src/index.ts",
   "typings": "lib/index.d.ts",
   "repository": {

src/getDataFromTree.ts

@@ -1,6 +1,5 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
-import { renderToStaticMarkup } from 'react-dom/server';
 import Query from './Query';
 
 // Like a Set, but for tuples. In practice, this class is used to store
@@ -93,14 +92,14 @@ export default function getDataFromTree(
     context,
     // If you need to configure this renderFunction, call getMarkupFromTree
     // directly instead of getDataFromTree.
-    renderFunction: renderToStaticMarkup,
+    renderFunction: require("react-dom/server").renderToStaticMarkup,
   });
 }
 
 export type GetMarkupFromTreeOptions = {
   tree: React.ReactNode;
   context?: { [key: string]: any };
-  renderFunction?: typeof renderToStaticMarkup;
+  renderFunction?: (tree: React.ReactElement<any>) => string;
 };
 
 export function getMarkupFromTree({
@@ -109,7 +108,7 @@ export function getMarkupFromTree({
   // The rendering function is configurable! We use renderToStaticMarkup as
   // the default, because it's a little less expensive than renderToString,
   // and legacy usage of getDataFromTree ignores the return value anyway.
-  renderFunction = renderToStaticMarkup,
+  renderFunction = require("react-dom/server").renderToStaticMarkup,
 }: GetMarkupFromTreeOptions): Promise<string> {
   const renderPromises = new RenderPromises();
 

src/renderToStringWithData.ts

@@ -1,8 +1,9 @@
 import { ReactElement } from 'react';
-import * as ReactDOM from 'react-dom/server';
-
-import { default as getDataFromTree } from './getDataFromTree';
+import { getMarkupFromTree } from './getDataFromTree';
 
 export function renderToStringWithData(component: ReactElement<any>): Promise<string> {
-  return getDataFromTree(component).then(() => ReactDOM.renderToString(component));
+  return getMarkupFromTree({
+    tree: component,
+    renderFunction: require("react-dom/server").renderToString,
+  });
 }