New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Provide hooks for server-side rendering #136

Closed
josephsavona opened this Issue Aug 21, 2015 · 43 comments

Comments

Projects
None yet
@josephsavona
Contributor

josephsavona commented Aug 21, 2015

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

This comment has been minimized.

Contributor

taion commented Sep 2, 2015

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

This comment has been minimized.

Contributor

adriantoine commented Sep 23, 2015

@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: github/fetch#125

Is there any workaround?

@adriantoine

This comment has been minimized.

Contributor

adriantoine commented Sep 23, 2015

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

This comment has been minimized.

Contributor

josephsavona commented Sep 24, 2015

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

This comment has been minimized.

Contributor

taion commented Sep 24, 2015

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

This comment has been minimized.

Member

zpao commented Sep 24, 2015

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.

@devknoll

This comment has been minimized.

@mykhailo-riabokon

This comment has been minimized.

mykhailo-riabokon commented Oct 1, 2015

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

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.

@mykhailo-riabokon

This comment has been minimized.

mykhailo-riabokon commented Oct 6, 2015

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.

@adriantoine

This comment has been minimized.

Contributor

adriantoine commented Oct 6, 2015

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

@mykhailo-riabokon

This comment has been minimized.

mykhailo-riabokon commented Oct 6, 2015

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

@mykhailo-riabokon

This comment has been minimized.

mykhailo-riabokon commented Oct 6, 2015

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

cdebotton added a commit to cdebotton/react-universal that referenced this issue Oct 8, 2015

Update README.md
Change some formatting around the ref facebook/relay#136.
@RavenHursT

This comment has been minimized.

RavenHursT commented Oct 21, 2015

👍

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

@dcomcto

This comment has been minimized.

dcomcto commented Oct 21, 2015

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

@taion

This comment has been minimized.

Contributor

taion commented Oct 21, 2015

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

@wincent

This comment has been minimized.

Contributor

wincent commented Oct 22, 2015

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

@RavenHursT

This comment has been minimized.

RavenHursT commented Oct 22, 2015

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

@davide-ganito

This comment has been minimized.

davide-ganito commented Nov 9, 2015

Any update on this?

@liesislukas liesislukas referenced this issue Nov 9, 2015

Closed

Isomorphic? #5

@denvned

This comment has been minimized.

Contributor

denvned commented Nov 10, 2015

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!

@RavenHursT

This comment has been minimized.

RavenHursT commented Nov 18, 2015

👍

@aweary

This comment has been minimized.

Member

aweary commented Jan 8, 2016

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

@alewarOS

This comment has been minimized.

alewarOS commented Jan 10, 2016

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

@josephsavona

This comment has been minimized.

Contributor

josephsavona commented Jan 10, 2016

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.

@aweary

This comment has been minimized.

Member

aweary commented Jan 11, 2016

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

@danez

This comment has been minimized.

danez commented May 27, 2016

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?

@andyhu

This comment has been minimized.

andyhu commented May 27, 2016

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

@aweary

This comment has been minimized.

Member

aweary commented May 27, 2016

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

@josephsavona

This comment has been minimized.

Contributor

josephsavona commented May 27, 2016

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

@aweary

This comment has been minimized.

Member

aweary commented May 27, 2016

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

@wincent

This comment has been minimized.

Contributor

wincent commented May 27, 2016

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

@DenisIzmaylov

This comment has been minimized.

DenisIzmaylov commented Jun 20, 2016

Up!

@rdewolff

This comment has been minimized.

rdewolff commented Jun 21, 2016

Any news on that?

@josephsavona

This comment has been minimized.

Contributor

josephsavona commented Jun 21, 2016

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

@wincent

This comment has been minimized.

Contributor

wincent commented Jun 22, 2016

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

@wincent wincent closed this Jun 22, 2016

@taion

This comment has been minimized.

Contributor

taion commented Jun 22, 2016

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?

@wincent

This comment has been minimized.

Contributor

wincent commented Jun 22, 2016

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

@tomconroy

This comment has been minimized.

Contributor

tomconroy commented Apr 19, 2017

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

@chadfurman

This comment has been minimized.

chadfurman commented Jul 4, 2017

@tomconroy

This comment has been minimized.

Contributor

tomconroy commented Aug 8, 2017

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

@chadfurman

This comment has been minimized.

chadfurman commented Aug 10, 2017

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment