Usage with react-hot-loader?

[leebenson]

I'm not sure whether this relates more to react-hot-loader, but I'm trying to get my Relay components to work alongside react-hot-loader 3.0.

My client-side set-up looks something like this...

handleMatch(async (e, _, renderProps) => {

  // Instantiate all the Relay stuff here...
  // ....

  const props = await isomorphicRelayRouter.prepareInitialRender(environment, renderProps);
  const doRender = () => {
    ReactDOM.render(
      <AppContainer>
        <Provider store={store}>
          <Router {...props} render={render} />
        </Provider>
      </AppContainer>,
      document.getElementById('root')
    );
  };

  doRender();

  if (module.hot) {
    module.hot.accept('config/routes', () => {
      /* eslint-disable no-unused-expressions */
      require('config/routes').default;

      doRender();
    });
  }
});

Making a change to a React component gets pushed down to the browser fine, and local component state is retained.

However, when making a change, navigating to another route and then navigating back again, I get this in the console...

Any known workarounds?

Thanks in advance.

[denvned]

Maybe you can use the following as a starting point: https://github.com/denvned/isomorphic-relay-boilerplate/blob/5dd32f3c5759b9305dc1c731bbf80671824978fc/frontend/src/app.js

[leebenson]

Thanks @denvned. My code is actually very similar, with two changes:

1. I'm using react-router's Router, instead of the missing IsomorphicRouter.Router
2. I tried with and without ReactDOM.unmountComponentAtNode (which had the effect of a full-page refresh; local component state was killed). Omitting that makes 'plain' components behave properly - but I get the same Relay errors with or without.

[denvned]

I'm using react-router's Router, instead of the missing IsomorphicRouter.Router

Yeah, the boilerplate have not been updated to use the current versions of isomorphic-relay-router.

local component state was killed

I'm not keeping components' local state in the boilerplate for reasons similar to explained in reduxjs/redux#1455 (comment). Maybe that's why I have not seen any Relay errors there.

Maybe this will not fix these specific errors, but you probably need to rematch routes inside doRender as they might be changed, using the match from react-router, then you need to move IsomorphicRelayRouter.prepareInitialRender into doRender.

Generally, I suggest to try to make this works without react-hot-loader first, and then try to make it work with it.

[rogersp]

@leebenson did you ever get to the bottom of this? I'm experiencing the same behavior with react-router-relay and react-hot-loader. When I make a change to my react component the hot reload occurs, but no GraphQL data is shown and I see a similar error message in the console:

Apologies in advance since this does not relate to isomorphic-relay-router.

[leebenson]

@rogersp, I actually didn't. I wound up swapping out Relay for Apollo on that particular project, so Relay routing went along with it. Sounds like an issue that might need addressing at react-hot-loader?

[rogersp]

@leebenson For what it's worth I was able to get around this by making sure my Relay containers were exported in different modules than the React components they wrapped. This is how it's done in the Relay Fullstack project.

Also, thanks for turning me on to Apollo. Looks slick!

[leebenson]

np - glad you got it working @rogersp.