React-apollo: [0.4.7] Weird problem with [email protected]

[HriBB]

I am seeing some really weird behavior with [email protected] and [email protected].

To make things easier to explain, this is my component hierarchy:
Admin > Modal > AddAlbum > [Title, Content, Footer]

Admin is my react-router Route.

If I enhance AddAlbum with graphql() and put it inside Modal, first hot reload does not work. When I change Title for example, nothing is updated. However, when I change Title again, or change Content, hot reload works and components are updated.

If I put AddAlbum directly in Admin, hot reload works all the time.
If I do not enhance AddAlbum with graphql(), hot reload works all the time.

I tried to create a reproducible example with react-hot-boilerplate@next, but I could not do it. Hot reloading always worked. I suspect that this problem has got something to do with my project setup, but I was not able to pinpoint it. It's really frustrating to work like this, when hot reload works for everything but graphql components.

Is anyone else seeing this issue?

[HriBB]

I understand that this is a very low-priority bug, if it can even be considered a bug. You can close it if you wish, just wanted to get some feedback from the community.

Also note that I am not using redux in my project.

[stubailo]

I think it's a pretty good bug to fix, but it's definitely hard to know what's going on without a concrete reproduction.

[HriBB]

I will try to create a reproducible example, but it might take some time, because I'm pretty busy these days.

[nickpisacane]

After upgrading from 0.3.x to 0.4.7 (now 0.5.4) I am noticing issues with hot-reloading as well (since the upgrade to 0.4.7). I will look more into this, but it seems to be something odd with the graphql higher order component. The project I am working on is using redux, and react-router. When Components are decorated with connect, or withRouter from redux, and react-router respectively on top of graphql, hot-reloading works. Yet, by itself, hot-reloading doesn't seem to work with graphql.

[jbaxleyiii]

@HriBB @nickpisacane any chance you could set up a sample repo with the issue? If love to fix this but don't use HMR myself

[HriBB]

but it seems to be something odd with the graphql higher order component

@nickpisacane my thoughts as well.

@jbaxleyiii here you go https://github.com/HriBB/react-apollo-rhl-problem Let me know if you need any assistance.

This was a bit of a twilight zone for me :) Really hard to reproduce. Had to keep the folder and route structure for the bug to "work". Please keep in mind that this could be a bug in RHL3 or more likely in my code.

[zdne]

Hi,
I've ran into the HMR problems as well. For me, a component "with data" never hot reloads. See https://github.com/apollostack/apollo-client/issues/764 for detailed description.

[koz]

Hi,
I'm having this problem with [email protected] as well. Hot reload doesn't work with any components with graphql HOC except if they are decorated with react-redux connect.

[HriBB]

@jbaxleyiii maybe it has got something to do with reassigning components.

[brunoabreu]

@stubailo @jbaxleyiii can you take a look at my PR?

[calebmer]

Fixed in 0.13.3 with @brunoabreu’s PR 🎉