React-apollo: SSR: renderToStringWithData issues

[voodooattack]

Quotes are missing when rendering the string literal in HTML output:

       const payload = `<script>window.__APOLLO_STATE__ = ${initialState};</script>`;

It should quote the string literal like so:

       const payload = `<script>window.__APOLLO_STATE__ = "${initialState}";</script>`;

Another issue that's driving me crazy is that some react components (like the ones offered by grommet) don't forward the props and context to React.Component in the constructor, which is kind of allowed by React for some reason. Is there any way to make those work? I just tried adding a line to react-apollo's server.js to make it do this:

        var Component = new ComponentClass(ownProps, context);
        Component.props = ownProps; // <<<< 

Thus forcing the component to behave, which makes it work and stops the errors; but the problem is that the probs are a jumbled mess afterwards.

Is there a way to make this work with such components?

P.S I also noticed that we never call componentWillMount(), although it is supposed to run on the server. Is this intentional?

[voodooattack]

Also found another bug while browsing the code:

export function getPropsFromChild(child) {
  const { props, type } = child;
  let ownProps = assign({}, props);
  if (type && type.defaultProps) ownProps = assign(type.defaultProps, props);
  return ownProps;
}

Should become:

export function getPropsFromChild(child) {
  const { props, type } = child;
  let ownProps = assign({}, props);
  if (type && type.defaultProps) ownProps = assign({}, type.defaultProps, props);
  return ownProps;
}

Otherwise it will cause a stack overflow.

[jbaxleyiii]

@voodooattack why does the initial state need to be quoted?

I've fixed the assignment issue in the new API but not sure I follow on the props issue?

[voodooattack]

@jbaxleyiii When it's not quoted it produces errors like this in the browser:

Uncaught SyntaxError: Unexpected token %

This is because encodeURI is being used to encode the JSON string.

As for the props issue, it gets fixed with the solution in the comment above.

All I had to do to make server rendering work with many (otherwise unusable) react libraries was to add the following lines of code in server.js after line 120:

        const Component = new ComponentClass(ownProps, context);
        try { Component.props = ownProps; } catch(e) {}
        if (Component.componentWillMount) Component.componentWillMount();

[jbaxleyiii]

@voodooattack gotcha. Do you have any libraries in particular you can reference? componentWillMount should be called when actually doing the renderToString so I was trying to avoid this when just finding and fetching data sources. I'm not sure of the cost of doing this though and I'm open to adding it in!

try { Component.props = ownProps; } catch(e) {}

Why would that throw?

[voodooattack]

@jbaxleyiii Here's an example with fixed-data-table:

TypeError: Cannot read property 'onWheel' of undefined
      at render (/home/voodooattack/dev/foxls/node_modules/fixed-data-table/internal/FixedDataTableNew.react.js:509:36)
      at getChildFromComponent (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:17:26)
      at getQueriesFromTree (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:88:24)
      at getQueriesFromTree (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:87:9)
      at getDataFromTree (/home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:104:14)
      at /home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:122:16
      at Array.map (native)
      at /home/voodooattack/dev/foxls/node_modules/react-apollo/server.js:114:59
      at run (/home/voodooattack/dev/foxls/node_modules/core-js/modules/es6.promise.js:87:22)
      at /home/voodooattack/dev/foxls/node_modules/core-js/modules/es6.promise.js:100:28
      at flush (/home/voodooattack/dev/foxls/node_modules/core-js/modules/_microtask.js:18:9)
      at _combinedTickCallback (internal/process/next_tick.js:67:7)
      at process._tickCallback (internal/process/next_tick.js:98:9)

It sets this.onWheel during componentWillMount() and tries to reference it during render().

As for the exception-handling part: I think that normal calls to super(props, context) use defineProperty to set props as a read-only property, so it might throw with some components.

[jbaxleyiii]

@voodooattack that makes sense! I'll add it in for the next release! Thanks for the discussion and help!

[voodooattack]

@jbaxleyiii Awesome, thank you!

[jbaxleyiii]

@voodooattack added in the next release. Thanks again!