isomorphic-relay-router integration?

[arvigeus]

I have trouble integrating isomorphic-relay-router. Following the example on their page, I have this in my client/index.js:

const mount = (RootComponent, props) => {
  render(
    <AppContainer>
      <RootComponent {...props} />
    </AppContainer>,
    root
  );
};

const environment = new Relay.Environment();

environment.injectNetworkLayer(new Relay.DefaultNetworkLayer('/graphql'));

const data = JSON.parse(document.getElementById('preloadedData').textContent);

IsomorphicRelay.injectPreparedData(environment, data);

match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {
  if (error) mount(<div>Нещо катастрофално се случи</div>);
  else {
    IsomorphicRouter.prepareInitialRender(environment, renderProps).then((props) => {
      if (module.hot) {
        module.hot.accept('./Root', () => {
          // eslint-disable-next-line global-require,import/newline-after-import
          const RootComponent = require('./Root').default;
          mount(RootComponent, props);
        });
      }

      mount(Root, props);
    });
  }
});

It kinda works, but it gives me ERR_CONNECTION_REFUSED every time I edit some component. Is there something wrong with my code, or I can't use this that way?

[delambo]

We're working on the same problem in an internal project. HMR is broken, but our client index looks something like this:

// ... similar imports
import routes from '../routes';
// ... similar setup, edited for brevity

const mount = () => {
  match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {
    IsomorphicRouter.prepareInitialRender(environment, renderProps).then((props) => {
      ReactDOM.render(
        <Router {...props} />,
        rootElement
      );
    });
  });
};

if (module.hot) {
  // Rerender after any changes to the following.
  module.hot.accept('../routes', mount);
}

mount();

We'll update you when we fix HMR. There's also talk about starting a Relay kyt.

[arvigeus]

Thank you so much! (note: I am complete relay noob, and more or less noob in general)
I had some progress thanks to your example. Here is what I have:

1. Added react-hmre to kyt-config.js (not sure if needed)

babelLoader.query.presets.env.development.plugins.push('react-hmre');

2. Server rendering:

IsomorphicRouter
  .prepareData(renderProps, networkLayer)
  .then(({ data, props }) => {
    // When a React Router route is matched then we render
    // the components and assets into the template.
    res.status(200).send(template({
      root: renderToString(IsomorphicRouter.render(props)),
      jsBundle: clientAssets.main.js,
      cssBundle: clientAssets.main.css,
      preloadedData: data
    }));
  }).catch(next);

(dunno if this is entirely correct)
3) My mount:

const mount = () => {
  match({ routes, history: browserHistory }, (error, redirectLocation, renderProps) => {
    if (error) throw error;
    IsomorphicRouter.prepareInitialRender(environment, renderProps).then((props) => { // eslint-disable-line max-len
      ReactDOM.render(
        <AppContainer>
          <Router render={applyRouterMiddleware(IsomorphicRouter.useIsoRelay)} {...props} />
        </AppContainer>,
        root
      );
    });
  });
};

It almost works: It reloads properly on the first change, throws Warning: [react-router] You cannot change <Router history>; it will be ignored and Warning: [react-router] You cannot change <Router routes>; it will be ignored, and after that it stops working. I think I'm missing something really stupid to make it work.

[delambo]

I think you can ignore those warnings. You can check out this issue here for more. The solution calls for wrapping a Root component in an AppContainer but I don't think that's possible if you're using the IsomorphicRouter.

[arvigeus]

Relay isomorphic kyt would be awesome. I feel more and more lost while trying to implement Relay integration. I finally managed to do it for one page, but that page got horribly broken: when I click on it's link it throws bunch of errors:

Warning: RelayContainer: Expected prop `viewer` to be supplied to `Publications`, but got `undefined`. Pass an explicit `null` if this is intentional.
Publications.js:15 Uncaught TypeError: Cannot read property 'publications' of undefined
ReactReconciler.js:64 Uncaught TypeError: Cannot read property 'getHostNode' of null

And page navigation is cancelled. Not sure if it's me or something else is broken

[arvigeus]

@delambo It seems that there was a problem with isomorphic-relay-router itself #52. Now it's fixed.

[arvigeus]

I consider this issue solved. Using the example code from here and hot reloading seems to work