diff --git a/Changelog.md b/Changelog.md
index c714dba71d..048b725d22 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -8,6 +8,19 @@
   refetching.  <br/>
   [@steelbrain](https://github.com/steelbrain) in [#2493](https://github.com/apollographql/react-apollo/pull/2493)
 
+### Improvements
+
+- Reimplement `getDataFromTree` using `ReactDOM.renderToStaticMarkup` to
+  make asynchronous server-side rendering compatible with
+  [React hooks](https://reactjs.org/docs/hooks-intro.html).
+  Although the rendering function used by `getDataFromTree` defaults to
+  `renderToStaticMarkup`, any suitable rendering function can be passed as
+  the optional second argument to `getDataFromTree`, which now returns a
+  `Promise<string>` that resolves to The HTML rendered in the final pass,
+  which means calling `renderToString` after `getDataFromTree` may not be
+  necessary anymore.
+  [PR #2533](https://github.com/apollographql/react-apollo/pull/2533)
+
 ## 2.2.4 (October 2, 2018)
 
 ### Bug Fixes
diff --git a/examples/ssr/.meteor/packages b/examples/ssr/.meteor/packages
index 0a43c80c30..6822743386 100644
--- a/examples/ssr/.meteor/packages
+++ b/examples/ssr/.meteor/packages
@@ -6,15 +6,15 @@
 
 meteor-base@1.4.0             # Packages every Meteor app needs to have
 mobile-experience@1.0.5       # Packages for a great mobile UX
-mongo@1.5.0                   # The database Meteor supports right now
+mongo@1.6.0                   # The database Meteor supports right now
 static-html             # Define static page content in .html files
 reactive-var@1.0.11            # Reactive variable for tracker
 tracker@1.2.0                 # Meteor's client-side reactive programming library
 
-standard-minifier-css@1.4.1   # CSS minifier run for production mode
-standard-minifier-js@2.3.4    # JS minifier run for production mode
+standard-minifier-css@1.5.0   # CSS minifier run for production mode
+standard-minifier-js@2.4.0    # JS minifier run for production mode
 es5-shim@4.8.0                # ECMAScript 5 compatibility for older browsers
-ecmascript@0.11.1              # Enable ECMAScript2015+ syntax in app code
-shell-server@0.3.1            # Server-side component of the `meteor shell` command
+ecmascript@0.12.0              # Enable ECMAScript2015+ syntax in app code
+shell-server@0.4.0            # Server-side component of the `meteor shell` command
 server-render@0.3.1
-underscore
+underscore@1.0.10
diff --git a/examples/ssr/.meteor/release b/examples/ssr/.meteor/release
index 4c71956e25..e76dedee10 100644
--- a/examples/ssr/.meteor/release
+++ b/examples/ssr/.meteor/release
@@ -1 +1 @@
-METEOR@1.7.0.5
+METEOR@1.8
diff --git a/examples/ssr/.meteor/versions b/examples/ssr/.meteor/versions
index f0b53ee444..6b7992c8c4 100644
--- a/examples/ssr/.meteor/versions
+++ b/examples/ssr/.meteor/versions
@@ -1,12 +1,12 @@
 allow-deny@1.1.0
-autoupdate@1.4.1
-babel-compiler@7.1.1
-babel-runtime@1.2.7
+autoupdate@1.5.0
+babel-compiler@7.2.1
+babel-runtime@1.3.0
 base64@1.0.11
-binary-heap@1.0.10
+binary-heap@1.0.11
 blaze-tools@1.0.10
-boilerplate-generator@1.5.0
-caching-compiler@1.1.12
+boilerplate-generator@1.6.0
+caching-compiler@1.2.0
 caching-html-compiler@1.1.3
 callback-hook@1.1.0
 check@1.3.1
@@ -16,53 +16,54 @@ ddp-common@1.4.0
 ddp-server@2.2.0
 deps@1.0.12
 diff-sequence@1.1.0
-dynamic-import@0.4.2
-ecmascript@0.11.1
+dynamic-import@0.5.0
+ecmascript@0.12.1
 ecmascript-runtime@0.7.0
-ecmascript-runtime-client@0.7.2
+ecmascript-runtime-client@0.8.0
 ecmascript-runtime-server@0.7.1
 ejson@1.1.0
 es5-shim@4.8.0
+fetch@0.1.0
 geojson-utils@1.0.10
 hot-code-push@1.0.4
 html-tools@1.0.11
 htmljs@1.0.11
-http@1.4.1
 id-map@1.1.0
+inter-process-messaging@0.1.0
 launch-screen@1.1.1
 livedata@1.0.18
 logging@1.1.20
 meteor@1.9.2
 meteor-base@1.4.0
-minifier-css@1.3.1
-minifier-js@2.3.5
+minifier-css@1.4.0
+minifier-js@2.4.0
 minimongo@1.4.5
 mobile-experience@1.0.5
 mobile-status-bar@1.0.14
 modern-browsers@0.1.2
-modules@0.12.2
-modules-runtime@0.10.2
-mongo@1.5.1
+modules@0.13.0
+modules-runtime@0.10.3
+mongo@1.6.0
+mongo-decimal@0.1.0
 mongo-dev-server@1.1.0
 mongo-id@1.0.7
-npm-mongo@3.0.11
+npm-mongo@3.1.1
 ordered-dict@1.1.0
 promise@0.11.1
 random@1.1.0
 reactive-var@1.0.11
 reload@1.2.0
 retry@1.1.0
-routepolicy@1.0.13
+routepolicy@1.1.0
 server-render@0.3.1
-shell-server@0.3.1
+shell-server@0.4.0
 socket-stream-client@0.2.2
 spacebars-compiler@1.1.3
-standard-minifier-css@1.4.1
-standard-minifier-js@2.3.4
+standard-minifier-css@1.5.1
+standard-minifier-js@2.4.0
 static-html@1.2.2
 templating-tools@1.1.2
 tracker@1.2.0
 underscore@1.0.10
-url@1.2.0
-webapp@1.6.2
+webapp@1.7.0
 webapp-hashing@1.0.9
diff --git a/examples/ssr/package.json b/examples/ssr/package.json
index febd0decad..607af6d9e2 100644
--- a/examples/ssr/package.json
+++ b/examples/ssr/package.json
@@ -7,9 +7,9 @@
     "visualize": "meteor --production --extra-packages bundle-visualizer"
   },
   "dependencies": {
-    "@babel/runtime": "7.1.2",
-    "apollo-cache-inmemory": "^1.2.10",
-    "apollo-client": "^2.4.2",
+    "@babel/runtime": "^7.1.2",
+    "apollo-cache-inmemory": "^1.3.7",
+    "apollo-client": "^2.4.4",
     "apollo-link-http": "^1.5.5",
     "apollo-server": "^2.1.0",
     "apollo-server-express": "^2.1.0",
diff --git a/examples/ssr/server/main.js b/examples/ssr/server/main.js
index ffa998b9b0..485cebc056 100644
--- a/examples/ssr/server/main.js
+++ b/examples/ssr/server/main.js
@@ -27,10 +27,11 @@ export const render = async sink => {
     </ApolloProvider>
   );
 
+  const start = +new Date;
   // Load all data from local server
   await getDataFromTree(WrappedApp);
-
   const body = renderToString(WrappedApp);
+  console.log("server rendering took", new Date - start, "ms");
   sink.renderIntoElementById('app', body);
   sink.appendToBody(`
     <script>
diff --git a/package-lock.json b/package-lock.json
index cb37e1a800..af1fa6006b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "2.2.4",
+  "version": "2.3.0-beta.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 59cd5b2088..567c13b285 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "react-apollo",
-  "version": "2.2.4",
+  "version": "2.3.0-beta.1",
   "author": "opensource@apollographql.com",
   "browser": "lib/react-apollo.browser.umd.js",
   "description": "React data container for Apollo Client",
diff --git a/rollup.config.js b/rollup.config.js
index 5b8fb8a5f4..b92ca37260 100644
--- a/rollup.config.js
+++ b/rollup.config.js
@@ -59,7 +59,13 @@ export default [
     plugins: [
       node(),
       commonjs({
-        ignore: ['react', 'apollo-client', 'graphql', 'graphql-tag'],
+        ignore: [
+          'react',
+          'react-dom/server',
+          'apollo-client',
+          'graphql',
+          'graphql-tag',
+        ],
       }),
       replace({
         'process.env.NODE_ENV': JSON.stringify('production'),
diff --git a/src/Query.tsx b/src/Query.tsx
index 790cf01529..8e302d7218 100644
--- a/src/Query.tsx
+++ b/src/Query.tsx
@@ -15,6 +15,7 @@ import { ZenObservable } from 'zen-observable-ts';
 import { OperationVariables, GraphqlQueryControls } from './types';
 import { parser, DocumentType, IDocumentDefinition } from './parser';
 import { getClient } from './component-utils';
+import { RenderPromises } from './getDataFromTree';
 
 const shallowEqual = require('fbjs/lib/shallowEqual');
 const invariant = require('invariant');
@@ -101,6 +102,7 @@ export interface QueryProps<TData = any, TVariables = OperationVariables> {
 export interface QueryContext {
   client?: ApolloClient<Object>;
   operations?: Map<string, { query: DocumentNode; variables: any }>;
+  renderPromises?: RenderPromises;
 }
 
 export default class Query<TData = any, TVariables = OperationVariables> extends React.Component<
@@ -109,6 +111,7 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
   static contextTypes = {
     client: PropTypes.object,
     operations: PropTypes.object,
+    renderPromises: PropTypes.object,
   };
 
   static propTypes = {
@@ -244,10 +247,13 @@ export default class Query<TData = any, TVariables = OperationVariables> extends
     }
   }
 
-  render() {
-    const { children } = this.props;
-    const queryResult = this.getQueryResult();
-    return children(queryResult);
+  render(): React.ReactNode {
+    const { context } = this;
+    const finish = () => this.props.children(this.getQueryResult());
+    if (context && context.renderPromises) {
+      return context.renderPromises.addQueryPromise(this, finish);
+    }
+    return finish();
   }
 
   private extractOptsFromProps(props: QueryProps<TData, TVariables>) {
diff --git a/src/browser.ts b/src/browser.ts
index 9b9c10d739..c6e2548550 100644
--- a/src/browser.ts
+++ b/src/browser.ts
@@ -23,6 +23,8 @@ export * from './withApollo';
 
 export * from './types';
 
+export * from './walkTree';
+
 // XXX remove in the next breaking semver change (3.0)
 const compose = require('lodash.flowright');
 export { compose };
diff --git a/src/getDataFromTree.ts b/src/getDataFromTree.ts
index 545e57d811..ed3954e630 100755
--- a/src/getDataFromTree.ts
+++ b/src/getDataFromTree.ts
@@ -1,275 +1,133 @@
 import * as React from 'react';
-
-export interface Context {
-  [key: string]: any;
-}
-
-interface PromiseTreeArgument {
-  rootElement: React.ReactNode;
-  rootContext: Context;
-  rootNewContext: Map<any, any>;
-}
-interface FetchComponent extends React.Component<any> {
-  fetchData(): Promise<void>;
-}
-
-interface PromiseTreeResult {
-  promise: Promise<any>;
-  context: Context;
-  instance: FetchComponent;
-  newContext: Map<any, any>;
-}
-
-interface PreactElement<P> {
-  attributes: P;
-}
-
-function getProps<P>(element: React.ReactElement<P> | PreactElement<P>): P {
-  return (element as React.ReactElement<P>).props || (element as PreactElement<P>).attributes;
-}
-
-function isReactElement(element: React.ReactNode): element is React.ReactElement<any> {
-  return !!(element as any).type;
-}
-
-function isComponentClass(Comp: React.ComponentType<any>): Comp is React.ComponentClass<any> {
-  return Comp.prototype && (Comp.prototype.render || Comp.prototype.isReactComponent);
-}
-
-function providesChildContext(
-  instance: React.Component<any>,
-): instance is React.Component<any> & React.ChildContextProvider<any> {
-  return !!(instance as any).getChildContext;
-}
-
-// Recurse a React Element tree, running visitor on each element.
-// If visitor returns `false`, don't call the element's render function
-// or recurse into its child elements.
-export function walkTree(
-  element: React.ReactNode,
-  context: Context,
-  visitor: (
-    element: React.ReactNode,
-    instance: React.Component<any> | null,
-    newContextMap: Map<any, any>,
-    context: Context,
-    childContext?: Context,
-  ) => boolean | void,
-  newContext: Map<any, any> = new Map(),
-) {
-  if (!element) {
-    return;
+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
+// (query, JSON.stringify(variables)) tuples.
+class Trie {
+  private children: Map<any, Trie> | null = null;
+  private added = false;
+
+  has(...keys: any[]) {
+    let node: Trie = this;
+    return keys.every(key => {
+      const child = node.children && node.children.get(key);
+      return !!(child && (node = child));
+    }) && node.added;
   }
 
-  if (Array.isArray(element)) {
-    element.forEach(item => walkTree(item, context, visitor, newContext));
-    return;
-  }
-
-  // A stateless functional component or a class
-  if (isReactElement(element)) {
-    if (typeof element.type === 'function') {
-      const Comp = element.type;
-      const props = Object.assign({}, Comp.defaultProps, getProps(element));
-      let childContext = context;
-      let child;
-
-      // Are we are a react class?
-      if (isComponentClass(Comp)) {
-        const instance = new Comp(props, context);
-        // In case the user doesn't pass these to super in the constructor.
-        // Note: `Component.props` are now readonly in `@types/react`, so
-        // we're using `defineProperty` as a workaround (for now).
-        Object.defineProperty(instance, 'props', {
-          value: instance.props || props,
-        });
-        instance.context = instance.context || context;
-
-        // Set the instance state to null (not undefined) if not set, to match React behaviour
-        instance.state = instance.state || null;
-
-        // Override setState to just change the state, not queue up an update
-        // (we can't do the default React thing as we aren't mounted
-        // "properly", however we don't need to re-render as we only support
-        // setState in componentWillMount, which happens *before* render).
-        instance.setState = newState => {
-          if (typeof newState === 'function') {
-            // React's TS type definitions don't contain context as a third parameter for
-            // setState's updater function.
-            // Remove this cast to `any` when that is fixed.
-            newState = (newState as any)(instance.state, instance.props, instance.context);
-          }
-          instance.state = Object.assign({}, instance.state, newState);
-        };
-
-        if (Comp.getDerivedStateFromProps) {
-          const result = Comp.getDerivedStateFromProps(instance.props, instance.state);
-          if (result !== null) {
-            instance.state = Object.assign({}, instance.state, result);
-          }
-        } else if (instance.UNSAFE_componentWillMount) {
-          instance.UNSAFE_componentWillMount();
-        } else if (instance.componentWillMount) {
-          instance.componentWillMount();
-        }
-
-        if (providesChildContext(instance)) {
-          childContext = Object.assign({}, context, instance.getChildContext());
-        }
-
-        if (visitor(element, instance, newContext, context, childContext) === false) {
-          return;
-        }
-
-        child = instance.render();
-      } else {
-        // Just a stateless functional
-        if (visitor(element, null, newContext, context) === false) {
-          return;
-        }
-
-        child = Comp(props, context);
-      }
-
+  add(...keys: any[]) {
+    let node: Trie = this;
+    keys.forEach(key => {
+      const map = node.children || (node.children = new Map);
+      const child = map.get(key);
       if (child) {
-        if (Array.isArray(child)) {
-          child.forEach(item => walkTree(item, childContext, visitor, newContext));
-        } else {
-          walkTree(child, childContext, visitor, newContext);
-        }
-      }
-    } else if ((element.type as any)._context || (element.type as any).Consumer) {
-      // A React context provider or consumer
-      if (visitor(element, null, newContext, context) === false) {
-        return;
-      }
-
-      let child;
-      if (!!(element.type as any)._context) {
-        // A provider - sets the context value before rendering children
-        // this needs to clone the map because this value should only apply to children of the provider
-        newContext = new Map(newContext);
-        newContext.set(element.type, element.props.value);
-        child = element.props.children;
+        node = child;
       } else {
-        // A consumer
-        let value = (element.type as any)._currentValue;
-        if (newContext.has((element.type as any).Provider)) {
-          value = newContext.get((element.type as any).Provider);
-        }
-        child = element.props.children(value);
-      }
-
-      if (child) {
-        if (Array.isArray(child)) {
-          child.forEach(item => walkTree(item, context, visitor, newContext));
-        } else {
-          walkTree(child, context, visitor, newContext);
-        }
-      }
-    } else {
-      // A basic string or dom element, just get children
-      if (visitor(element, null, newContext, context) === false) {
-        return;
-      }
-
-      if (element.props && element.props.children) {
-        React.Children.forEach(element.props.children, (child: any) => {
-          if (child) {
-            walkTree(child, context, visitor, newContext);
-          }
-        });
+        map.set(key, node = new Trie());
       }
-    }
-  } else if (typeof element === 'string' || typeof element === 'number') {
-    // Just visit these, they are leaves so we don't keep traversing.
-    visitor(element, null, newContext, context);
+    });
+    node.added = true;
   }
-  // TODO: Portals?
-}
-
-function hasFetchDataFunction(instance: React.Component<any>): instance is FetchComponent {
-  return typeof (instance as any).fetchData === 'function';
 }
 
-function isPromise<T>(promise: Object): promise is Promise<T> {
-  return typeof (promise as any).then === 'function';
-}
-
-function getPromisesFromTree({
-  rootElement,
-  rootContext,
-  rootNewContext,
-}: PromiseTreeArgument): PromiseTreeResult[] {
-  const promises: PromiseTreeResult[] = [];
+export class RenderPromises {
+  // Map from Query component instances to pending fetchData promises.
+  private queryPromises = new Map<Query<any, any>, Promise<any>>();
+
+  // A way of remembering queries we've seen during previous renderings,
+  // so that we never attempt to fetch them again in future renderings.
+  private queryGraveyard = new Trie();
+
+  public addQueryPromise<TData, TVariables>(
+    queryInstance: Query<TData, TVariables>,
+    finish: () => React.ReactNode,
+  ): React.ReactNode {
+    const { query, variables } = queryInstance.props;
+    if (!this.queryGraveyard.has(query, JSON.stringify(variables))) {
+      this.queryPromises.set(
+        queryInstance,
+        new Promise(resolve => {
+          resolve(queryInstance.fetchData());
+        }),
+      );
+      // Render null to abandon this subtree for this rendering, so that we
+      // can wait for the data to arrive.
+      return null;
+    }
+    return finish();
+  }
 
-  walkTree(
-    rootElement,
-    rootContext,
-    (_, instance, newContext, context, childContext) => {
-      if (instance && hasFetchDataFunction(instance)) {
-        const promise = instance.fetchData();
-        if (isPromise<Object>(promise)) {
-          promises.push({
-            promise,
-            context: childContext || context,
-            instance,
-            newContext,
-          });
-          return false;
-        }
-      }
-    },
-    rootNewContext,
-  );
+  public hasPromises() {
+    return this.queryPromises.size > 0;
+  }
 
-  return promises;
+  public consumeAndAwaitPromises() {
+    const promises: Promise<any>[] = [];
+    this.queryPromises.forEach((promise, queryInstance) => {
+      const { query, variables } = queryInstance.props;
+      // Make sure we never try to call fetchData for this query document and
+      // these variables again. Since the queryInstance objects change with
+      // every rendering, deduplicating them by query and variables is the
+      // best we can do. If a different Query component happens to have the
+      // same query document and variables, it will be immediately rendered
+      // by calling finish() in addQueryPromise, which could result in the
+      // rendering of an unwanted loading state, but that's not nearly as bad
+      // as getting stuck in an infinite rendering loop because we kept calling
+      // queryInstance.fetchData for the same Query component indefinitely.
+      this.queryGraveyard.add(query, JSON.stringify(variables));
+      promises.push(promise);
+    });
+    this.queryPromises.clear();
+    return Promise.all(promises);
+  }
 }
 
-function getDataAndErrorsFromTree(
-  rootElement: React.ReactNode,
-  rootContext: Object,
-  storeError: Function,
-  rootNewContext: Map<any, any> = new Map(),
-): Promise<any> {
-  const promises = getPromisesFromTree({ rootElement, rootContext, rootNewContext });
+class RenderPromisesProvider extends React.Component<{
+  renderPromises: RenderPromises;
+}> {
+  static childContextTypes = {
+    renderPromises: PropTypes.object,
+  };
 
-  if (!promises.length) {
-    return Promise.resolve();
+  getChildContext() {
+    return {
+      renderPromises: this.props.renderPromises,
+    };
   }
 
-  const mappedPromises = promises.map(({ promise, context, instance, newContext }) => {
-    return promise
-      .then(_ => getDataAndErrorsFromTree(instance.render(), context, storeError, newContext))
-      .catch(e => storeError(e));
-  });
-
-  return Promise.all(mappedPromises);
-}
-
-function processErrors(errors: any[]) {
-  switch (errors.length) {
-    case 0:
-      break;
-    case 1:
-      throw errors.pop();
-    default:
-      const wrapperError: any = new Error(
-        `${errors.length} errors were thrown when executing your fetchData functions.`,
-      );
-      wrapperError.queryErrors = errors;
-      throw wrapperError;
+  render() {
+    return this.props.children;
   }
 }
 
 export default function getDataFromTree(
   rootElement: React.ReactNode,
-  rootContext: any = {},
-): Promise<any> {
-  const errors: any[] = [];
-  const storeError = (error: any) => errors.push(error);
+  // 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,
+): Promise<string> {
+  const renderPromises = new RenderPromises();
+
+  function process(): Promise<string> | string {
+    const html = renderFunction(
+      React.createElement(RenderPromisesProvider, {
+        renderPromises,
+        // Always re-render from the rootElement, even though it might seem
+        // better to render the children of the component responsible for the
+        // promise, because it is not possible to reconstruct the full context
+        // of the original rendering (including all unknown context provider
+        // elements) for a subtree of the orginal component tree.
+        children: rootElement,
+      })
+    );
+
+    return renderPromises.hasPromises()
+      ? renderPromises.consumeAndAwaitPromises().then(process)
+      : html;
+  }
 
-  return getDataAndErrorsFromTree(rootElement, rootContext, storeError).then(_ =>
-    processErrors(errors),
-  );
+  return Promise.resolve().then(process);
 }
diff --git a/src/walkTree.ts b/src/walkTree.ts
new file mode 100644
index 0000000000..4e9071ed26
--- /dev/null
+++ b/src/walkTree.ts
@@ -0,0 +1,173 @@
+import * as React from 'react';
+
+export interface Context {
+  [key: string]: any;
+}
+
+interface PreactElement<P> {
+  attributes: P;
+}
+
+function getProps<P>(element: React.ReactElement<P> | PreactElement<P>): P {
+  return (element as React.ReactElement<P>).props || (element as PreactElement<P>).attributes;
+}
+
+function isReactElement(element: React.ReactNode): element is React.ReactElement<any> {
+  return !!(element as any).type;
+}
+
+function isComponentClass(Comp: React.ComponentType<any>): Comp is React.ComponentClass<any> {
+  return Comp.prototype && (Comp.prototype.render || Comp.prototype.isReactComponent);
+}
+
+function providesChildContext(
+  instance: React.Component<any>,
+): instance is React.Component<any> & React.ChildContextProvider<any> {
+  return !!(instance as any).getChildContext;
+}
+
+// Recurse a React Element tree, running visitor on each element.
+// If visitor returns `false`, don't call the element's render function
+// or recurse into its child elements.
+export function walkTree(
+  element: React.ReactNode,
+  context: Context,
+  visitor: (
+    element: React.ReactNode,
+    instance: React.Component<any> | null,
+    newContextMap: Map<any, any>,
+    context: Context,
+    childContext?: Context,
+  ) => boolean | void,
+  newContext: Map<any, any> = new Map(),
+) {
+  if (!element) {
+    return;
+  }
+
+  if (Array.isArray(element)) {
+    element.forEach(item => walkTree(item, context, visitor, newContext));
+    return;
+  }
+
+  // A stateless functional component or a class
+  if (isReactElement(element)) {
+    if (typeof element.type === 'function') {
+      const Comp = element.type;
+      const props = Object.assign({}, Comp.defaultProps, getProps(element));
+      let childContext = context;
+      let child;
+
+      // Are we are a react class?
+      if (isComponentClass(Comp)) {
+        const instance = new Comp(props, context);
+        // In case the user doesn't pass these to super in the constructor.
+        // Note: `Component.props` are now readonly in `@types/react`, so
+        // we're using `defineProperty` as a workaround (for now).
+        Object.defineProperty(instance, 'props', {
+          value: instance.props || props,
+        });
+        instance.context = instance.context || context;
+
+        // Set the instance state to null (not undefined) if not set, to match React behaviour
+        instance.state = instance.state || null;
+
+        // Override setState to just change the state, not queue up an update
+        // (we can't do the default React thing as we aren't mounted
+        // "properly", however we don't need to re-render as we only support
+        // setState in componentWillMount, which happens *before* render).
+        instance.setState = newState => {
+          if (typeof newState === 'function') {
+            // React's TS type definitions don't contain context as a third parameter for
+            // setState's updater function.
+            // Remove this cast to `any` when that is fixed.
+            newState = (newState as any)(instance.state, instance.props, instance.context);
+          }
+          instance.state = Object.assign({}, instance.state, newState);
+        };
+
+        if (Comp.getDerivedStateFromProps) {
+          const result = Comp.getDerivedStateFromProps(instance.props, instance.state);
+          if (result !== null) {
+            instance.state = Object.assign({}, instance.state, result);
+          }
+        } else if (instance.UNSAFE_componentWillMount) {
+          instance.UNSAFE_componentWillMount();
+        } else if (instance.componentWillMount) {
+          instance.componentWillMount();
+        }
+
+        if (providesChildContext(instance)) {
+          childContext = Object.assign({}, context, instance.getChildContext());
+        }
+
+        if (visitor(element, instance, newContext, context, childContext) === false) {
+          return;
+        }
+
+        child = instance.render();
+      } else {
+        // Just a stateless functional
+        if (visitor(element, null, newContext, context) === false) {
+          return;
+        }
+
+        child = Comp(props, context);
+      }
+
+      if (child) {
+        if (Array.isArray(child)) {
+          child.forEach(item => walkTree(item, childContext, visitor, newContext));
+        } else {
+          walkTree(child, childContext, visitor, newContext);
+        }
+      }
+    } else if ((element.type as any)._context || (element.type as any).Consumer) {
+      // A React context provider or consumer
+      if (visitor(element, null, newContext, context) === false) {
+        return;
+      }
+
+      let child;
+      if (!!(element.type as any)._context) {
+        // A provider - sets the context value before rendering children
+        // this needs to clone the map because this value should only apply to children of the provider
+        newContext = new Map(newContext);
+        newContext.set(element.type, element.props.value);
+        child = element.props.children;
+      } else {
+        // A consumer
+        let value = (element.type as any)._currentValue;
+        if (newContext.has((element.type as any).Provider)) {
+          value = newContext.get((element.type as any).Provider);
+        }
+        child = element.props.children(value);
+      }
+
+      if (child) {
+        if (Array.isArray(child)) {
+          child.forEach(item => walkTree(item, context, visitor, newContext));
+        } else {
+          walkTree(child, context, visitor, newContext);
+        }
+      }
+    } else {
+      // A basic string or dom element, just get children
+      if (visitor(element, null, newContext, context) === false) {
+        return;
+      }
+
+      if (element.props && element.props.children) {
+        React.Children.forEach(element.props.children, (child: any) => {
+          if (child) {
+            walkTree(child, context, visitor, newContext);
+          }
+        });
+      }
+    }
+  } else if (typeof element === 'string' || typeof element === 'number') {
+    // Just visit these, they are leaves so we don't keep traversing.
+    visitor(element, null, newContext, context);
+  }
+  // TODO: Portals?
+}
diff --git a/test/client/getDataFromTree.test.tsx b/test/client/getDataFromTree.test.tsx
index d95dbc5bbe..9fde7c67c6 100644
--- a/test/client/getDataFromTree.test.tsx
+++ b/test/client/getDataFromTree.test.tsx
@@ -468,7 +468,7 @@ describe('SSR', () => {
   });
 
   describe('`getDataFromTree`', () => {
-    it('should run through all of the queries that want SSR', () => {
+    it('should run through all of the queries that want SSR', async () => {
       const query = gql`
         {
           currentUser {
@@ -505,8 +505,15 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).then(() => {
+      await getDataFromTree(app).then(html => {
+        const markup = ReactDOM.renderToStaticMarkup(app);
+        expect(markup).toEqual(html);
+        expect(markup).toMatch(/James/);
+      });
+
+      await getDataFromTree(app, ReactDOM.renderToString).then(html => {
         const markup = ReactDOM.renderToString(app);
+        expect(markup).toEqual(html);
         expect(markup).toMatch(/James/);
       });
     });
@@ -775,7 +782,7 @@ describe('SSR', () => {
       });
     });
 
-    it('should return multiple errors in nested wrapped components without circular reference to wrapper error', () => {
+    it('should return the first of multiple errors thrown by nested wrapped components', () => {
       const lastNameQuery = gql`
         {
           currentUser {
@@ -824,8 +831,9 @@ describe('SSR', () => {
       type WithLastNameProps = ChildProps<Props, LastNameData>;
       const withLastName = graphql<Props, LastNameData>(lastNameQuery);
 
+      const fooError = new Error('foo');
       const BorkedComponent = () => {
-        throw new Error('foo');
+        throw fooError;
       };
 
       const WrappedBorkedComponent = withLastName(BorkedComponent);
@@ -838,7 +846,6 @@ describe('SSR', () => {
         </div>
       );
 
-      type WithFirstNameProps = ChildProps<Props, FirstNameData>;
       const withFirstName = graphql<Props, FirstNameData>(firstNameQuery);
 
       const WrappedContainerComponent = withFirstName(ContainerComponent);
@@ -849,10 +856,11 @@ describe('SSR', () => {
         </ApolloProvider>
       );
 
-      return getDataFromTree(app).catch(e => {
-        expect(e.toString()).toEqual(expect.stringContaining('2 errors were thrown'));
-        expect(e.queryErrors.length).toBeGreaterThan(1);
-        expect(e.toString()).not.toEqual(e.queryErrors[0].toString());
+      return getDataFromTree(app).then(() => {
+        throw new Error('Should have thrown an error');
+      }, e => {
+        expect(e.toString()).toEqual('Error: foo');
+        expect(e).toBe(fooError);
       });
     });
 
@@ -901,7 +909,7 @@ describe('SSR', () => {
 
       return getDataFromTree(app).catch(e => {
         expect(e).toBeTruthy();
-        expect(e.queryErrors).toBeUndefined();
+        expect(e.toString()).toMatch(/Failed to fetch/);
 
         // But we can still render the app if we want to
         const markup = ReactDOM.renderToString(app);
@@ -1155,14 +1163,14 @@ describe('SSR', () => {
         };
 
         componentWillMount() {
-          this.setState(
-            (state: State, props: Props, context: { client: ApolloClient<any> }) =>
-              ({
-                thing: state.thing + 1,
-                userId: props.id,
-                client: context.client,
-              } as any),
-          );
+          this.setState((
+            state: State,
+            props: Props,
+          ) => ({
+            thing: state.thing + 1,
+            userId: props.id,
+            client: apolloClient,
+          } as any));
         }
 
         render() {