React-hot-loader: Hot reloading breaks Relay components

[lemonmade]

Description

When using the latest version of RHL, attempting to hot-reload a React component wrapped in a Relay container causes Relay to send in props that don't have the properties defined by that component's fragments. Initial render (including SSR) work fine, it is only when the component is changed and the re-render happens that the incorrect prop is passed down. I have made a demo repo of this (using the relay starter kit as a baseline) here: https://github.com/lemonmade/relay-starter-kit-hot-reloading. Of particular note are the main app file, the relay component's definition, and the simple Webpack config.

If anyone knows someone on the Relay side who might be able to help as well, that would be excellent. My assumptions is that this has more to do with how RHL works than Relay, but I could be wrong.

Expected behavior

I would expect that the re-rendered component would still get the correct prop passed down via Relay. As a somewhat separate issue, I would expect that the component would be correctly reloaded/ fetch any changed data if the fragments themselves were changed, but this appears to not be the case and (I imagine) is more of a fault with Relay than RHL.

Actual behavior

The correct prop is passed in (i.e., we ask for a viewer through the passed fragment, and we do get a prop by that name from Relay) but it does not have any of the properties requested in our fragment.

Environment

React Hot Loader version: 3.0.0-beta.6

Run these commands in the project folder and fill in their results:

1. node -v: v7.1.0
2. npm -v: 3.10.9
3. yarn --version: 0.16.1

Then, specify:

1. Operating system: macOS 10.12.1
2. Browser and version: Chrome 54

Reproducible Demo

Clone the repo below, npm install/ yarn, npm start/ yarn start, visit localhost:3000, note the absence of errors, then edit anything in relay component's definition, including something simple like changing the title.

https://github.com/lemonmade/relay-starter-kit-hot-reloading

[yasserkaddour]

Hi @lemonmade, Relay work for me so I checked your repo, I deleted your render function and that solved the issue.

See my PR https://github.com/lemonmade/relay-starter-kit-hot-reloading/pull/1

[calesce]

Thanks @YasserKaddour, yeah actually you just need to change "App" to "CurrentApp" so that you're passing the latest version of the App module to render. Alternatively you could use Webpack 2 and not have to re-import App.

[lemonmade]

Yeah sorry, I was definitely wrong with that example as you said. I do have a more complex version of this within a larger app that doesn't work correctly (with a similar message, which is why I was a bit overzealous in posting the issue), I will reopen when I have another failing minimal example. Thanks!