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).

@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?

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!

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.

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.

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.

@zpao https://facebook.github.io/react-native/docs/network.html#fetch

I was trying server rendering with Relay, using all hints which were provided in github answers:

• change fetch to isomorphic-fetch in fbjs package
• add document error handler in fbjs package.

And after that I have issue with two versions of React, which I can not resolve, because I delete react node_module everywhere where it was used, and still have this error.

So, does somebody has an example of simple server rendering with Relay and GraphQL? Or, does somebody has success in server rendering with Relay + GraphQL. Thank you.

Actually fetching data with Relay + GraphQL is working, the problem in render Relay components.
I have created the repository where you can check and see this problem.

@mikhail-riabokon it won't work until facebook/fbjs#61 is merged

@adriantoine Yes. I know it, but fetch is not only one problem with Relay on server.

My repo example includes node_modules where I changed this packages, just for test.

👍

Do we have any updates on this? Spent the past 2 days trying to figure out how to use Relay Isomorphically...

This is slowing my team up. I would love to see a solution. From what I can tell the issue is with react-native: facebook/fbjs#60

We've sort of derailed this issue I think. Ultimately those fetch issues are peripheral to the real question of providing the relevant hooks.

@RavenHursT

Do we have any updates on this?

I don't believe anybody is actively working on this internally right now (although this issue is currently assigned to @voideanvalue he's working on other stuff presently). It's possible that providing support to an external contributor who wants to work on this might get us there faster than doing it ourselves.

@wincent I'm more than willing to give a hand.. can you or @voideanvalue give me a starting point or two where I could start spelunking into the problem?

Any update on this?

Glad to report that I have just managed to implement server side rendering for Relay: https://github.com/denvned/isomorphic-relay

Here is an example: https://github.com/denvned/isomorphic-relay/tree/master/examples/star-wars

@voideanvalue, can you please have a look? And thank you for the great info. It helped me very much!

👍

Any word on this? Anyone on the Relay team working on this at all yet?

I'm wondering the same. Most other third party implementations get the job done, but fall under certain scenarios.

With the help of the community we've made good progress towards this. The main prerequisite is making all Relay state contextual instead of global, so that the same node process can be used to handle HTTP requests from multiple users. Almost all modules have been converted and there are pending PRs for the remaining pieces. We're tracking that work in #558.

Thanks @josephsavona, exciting to see so much progress on this. I'll keep an eye on #558 👍

Hello, what is the current state of this issue? I'm currently doing research on how to integrate relay into our react infrastructure and was wondering if ss-rendering is now easily possible?

#558 is closed. That means it should work now?

#559 is the next step in making SSR work, per the comments in #558

@andyhu server rendering does work today, check out https://github.com/denvned/isomorphic-relay

@josephsavona do you guys think that isomorphic-relay is ready for production as far as you know?

I haven't used it personally (yet), but from my external perspective it looks pretty good.

Up!

Any news on that?

@DenisIzmaylov @rdewolff Our current recommendation is to use isomorphic-relay alongside Relay if you need server rendering right now.

This looks closeable to me now, so going to close it.

Are there any plans to eventually bring that support into the main Relay repo, or will it remain a third-party thing for the time being?

No immediate plans. We very much like the idea of having a small, well-defined core, upon which and with which other stuff can be straightforwardly built. (Note: this is more aspirational than reality at the moment, but we are working on it.)

Is there a recommendation for server-side rendering with Relay Modern? Should we wait for an update to isomorphic-relay?

@tomconroy I'd like to know this also. This looks useful:

https://hackernoon.com/getting-started-with-relay-modern-for-building-isomorphic-web-apps-ae049e4e23c1

@chadfurman
That article seems to ignore an important step – rehydrating the relay store – without which will cause apps to flash to "loading" while the client-side query loads. I would suggest taking a look at @taion's work in found-relay (the solution afaik is still "naive")
relay-tools/found-relay#16 (comment)