How to implement next-with-apollo with react-apollo SSR? about next-with-apollo HOT 16 CLOSED

import React from 'react'
import initApollo from './init-apollo'
import Head from 'next/head'
import { getDataFromTree } from 'react-apollo'

export default App => {
  return class Apollo extends React.Component {
    static displayName = 'withApollo(App)'
    static async getInitialProps (ctx) {
      const { Component, router } = ctx

      let appProps = {}
      if (App.getInitialProps) {
        appProps = await App.getInitialProps(ctx)
      }

      // Run all GraphQL queries in the component tree
      // and extract the resulting data
      const apollo = initApollo()
      if (!process.browser) {
        try {
          // Run all GraphQL queries
          await getDataFromTree(
            <App
              {...appProps}
              Component={Component}
              router={router}
              apolloClient={apollo}
            />
          )
        } catch (error) {
          // Prevent Apollo Client GraphQL errors from crashing SSR.
          // Handle them in components via the data.error prop:
          // https://www.apollographql.com/docs/react/api/react-apollo.html#graphql-query-data-error
          console.error('Error while running `getDataFromTree`', error)
        }

        // getDataFromTree does not call componentWillUnmount
        // head side effect therefore need to be cleared manually
        Head.rewind()
      }

      // Extract query data from the Apollo store
      const apolloState = apollo.cache.extract()

      console.log(apollo)

      return {
        ...appProps,
        apolloState
      }
    }

    constructor (props) {
      super(props)
      this.apolloClient = initApollo(props.apolloState)
    }

    render () {
      return <App {...this.props} apolloClient={this.apolloClient} />
    }
  }
}

function (App) {
        var _a;
        return _a = /** @class */ (function (_super) {
                __extends(WithApollo, _super);
                function WithApollo(props) {
                    var _this = _super.call(this, props) || this;
                    _this.apollo = apollo_1.default(client, {
                        initialState: props.apolloState.data
                    });
                    return _this;
                }
                WithApollo.prototype.render = function () {
                    return react_1.default.createElement(App, __assign({}, this.props, { apollo: this.apollo }));
                };
                return WithApollo;
            }(react_1.default.Component)),
            _a.displayName = "WithApollo(" + getDisplayName(App) + ")",
            _a.propTypes = {
                apolloState: prop_types_1.default.object,
                apollo: prop_types_1.default.object
            },
            _a.getInitialProps = function (appCtx) { return __awaiter(_this, void 0, void 0, function () {
                var Component, router, ctx, headers, apollo, apolloState, getInitialProps, appProps, error_1;
                return __generator(this, function (_a) {
                    switch (_a.label) {
                        case 0:
                            Component = appCtx.Component, router = appCtx.router, ctx = appCtx.ctx;
                            headers = ctx.req ? ctx.req.headers : {};
                            apollo = apollo_1.default(client, { ctx: ctx, headers: headers });
                            apolloState = {};
                            getInitialProps = App.getInitialProps;
                            appProps = { pageProps: {} };
                            if (!getInitialProps) return [3 /*break*/, 2];
                            ctx.apolloClient = apollo;
                            return [4 /*yield*/, getInitialProps(appCtx)];
                        case 1:
                            appProps = _a.sent();
                            _a.label = 2;
                        case 2:
                            if (ctx.res && (ctx.res.headersSent || ctx.res.finished)) {
                                return [2 /*return*/, {}];
                            }
                            if (!(options.getDataFromTree === 'always' ||
                                (options.getDataFromTree === 'ssr' && ssrMode))) return [3 /*break*/, 7];
                            _a.label = 3;
                        case 3:
                            _a.trys.push([3, 5, , 6]);
                            return [4 /*yield*/, react_apollo_1.getDataFromTree(react_1.default.createElement(App, __assign({}, appProps, { Component: Component, router: router, apolloState: apolloState, apollo: apollo })))];
                        case 4:
                            _a.sent();
                            return [3 /*break*/, 6];
                        case 5:
                            error_1 = _a.sent();
                            // Prevent Apollo Client GraphQL errors from crashing SSR.
                            if (process.env.NODE_ENV !== 'production') {
                                // tslint:disable-next-line no-console This is a necessary debugging log
                                console.error('GraphQL error occurred [getDataFromTree]', error_1);
                            }
                            return [3 /*break*/, 6];
                        case 6:
                            if (ssrMode) {
                                // getDataFromTree does not call componentWillUnmount
                                // head side effect therefore need to be cleared manually
                                head_1.default.rewind();
                            }
                            apolloState.data = apollo.cache.extract();
                            _a.label = 7;
                        case 7: return [2 /*return*/, __assign({}, appProps, { apolloState: apolloState })];
                    }
                });
            }); },
            _a;
    }