Provide hooks for server-side rendering

[josephsavona]

Relay was built to support server-side rendering, and we are doing so internally at Facebook. @voideanvalue gives a great overview of how that works. However, the necessary hooks and APIs are not exposed in the OSS release. A future update to Relay will provide support and documentation for this feature.

[taion]

I'm not sure if this is the right place to report this, but the whatwg-fetch dependency coming from fbjs means that react-relay currently can't be imported in Node.

I believe this can be fixed by switching https://github.com/facebook/fbjs/blob/cb1f3026bcc3852616fad85b8aa12dca554fb093/src/__forks__/fetch.js#L14-L15 to use isomorphic-fetch, which does the right thing (mostly).

[adriantoine]

@taion is right, when I try to use server rendering, I get this error:

/home/adrien/Projects/adriantoine.com/node_modules/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js:4
  if (self.fetch) {
      ^

ReferenceError: self is not defined
    at /home/adrien/Projects/adriantoine.com/node_modules/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js:4:7
    at Object.<anonymous> (/home/adrien/Projects/adriantoine.com/node_modules/react-relay/node_modules/fbjs/node_modules/whatwg-fetch/fetch.js:330:3)
    at Module._compile (module.js:434:26)
    at Module._extensions..js (module.js:452:10)
    at Object.require.extensions.(anonymous function) [as .js] (/home/adrien/Projects/adriantoine.com/node_modules/babel/node_modules/babel-core/lib/api/register/node.js:214:7)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/home/adrien/Projects/adriantoine.com/node_modules/react-relay/node_modules/fbjs/lib/fetch.js:14:1)

which is what you get when you use whatwg-fetch instead of isomorphic-fetch: JakeChampion/fetch#125

Is there any workaround?

[adriantoine]

I just tried to locally change my node modules and to replace (inside fbjs/lib/fetch.js, and I installed isomorphic-fetch as well):

require('whatwg-fetch');
module.exports = self.fetch.bind(self);

by:

module.exports = require('isomorphic-fetch');

and my app seems to "isomorphically" work fine, so that was the only thing preventing me from rendering relay components on server side.

I guess fbjs is used by other projects so it's probably not safe to change it now, however isomorphic-fetch is built on top of whatwg-fetch so it might be alright.

Is this going to be addressed soon?

Thanks!

[josephsavona]

Yeah, this same issue affects using Relay on React Native

@yungsters @zpao - should we require that users bring their own fetch polyfill? Another option would be to split RelayDefaultNetworkLayer into its own package.

[taion]

I don't think splitting out RelayDefaultNetworkLayer is going to help - unless I'm missing something, I'm still going to want to import that when using Node anyway, so it just moves the problem around instead of fixing it.

The nice thing about using isomorphic-fetch is that it's something of a de facto solution for web things, since it will just work. With React Native, I assume attempting to use isomorphic-fetch will just be a no-op; is that not the case? Any web use cases are going to be using isomorphic-fetch anyway, so I feel like it'd be easier if that were just bundled, assuming it doesn't break RN.

[zpao]

I had looked at node fetch modules when @steveluscher did this initially. We sort of brushed off the node case. But it's obviously an issue people are having.

I hadn't seen isomorphic-fetch at the time, I sort of like that. The only problem with it is that afaik, it's not going to be awesome for browser packaging when using Webpack (unless that has started reading the browser field in package.json). Browserify should be fine though. I'd like to hear from Webpack experts about what would need to be done (my concern is not for us consuming it here but for the end user app consuming Relay).

For React Native… I'm not sure. The node one uses node APIs and maybe we bring in some shimming so that packaging works but I also wouldn't be surprised if we don't. Would want to talk to experts. There might already be a fetch polyfill implemented in the RN runtime and if it uses the browser package there maybe it just works.

Seems like we can probably move the fetch discussion elsewhere since it's not really the point of this issue, just a piece of the puzzle.