How do you move from stock Relay to Relay with a router?

Question

I have a React/Relay app that is currently working that I would like to add routing to using react-router-relay. When I try the minimum possible conversion, see the code below, I get an incomprehensible error in the log: "Uncaught Error: Invariant Violation: RelayQueryNode: Invalid concrete node."

import 'babel/polyfill';
import TodoApp from './components/TodoApp';

import { Router, Route } from 'react-router';

import ReactRouterRelay from 'react-router-relay';
import TodoAppHomeRoute from './routes/TodoAppHomeRoute';

/*

This section works perfectly

ReactDOM.render(
  <Relay.RootContainer Component={TodoApp} route={new TodoAppHomeRoute()} />,
  document.getElementById('root')
);
*/


//This breaks every time.
ReactDOM.render(
  <Router
    createElement={ReactRouterRelay.createElement}>
    <Route
      path="/"
      component={TodoApp}
      queries={new TodoAppHomeRoute().queries} // and the query
      />
  </Router>,
  document.getElementById('root')
);

Another possible way to phrase this question would be: What are the differences between the appropriate ways to specify plain vanilla Relay's RelayRoutes.queries and react-router-relay's queries for Routes?

Answer 1

A couple of other people reported this issue here.

Looks like adding an explicit import for each of Relay and React in your components may fix it (I was seeing this just now and it fixed it for me):

import React from 'react';
import Relay from 'react-relay';

Or failing that, an npm install --save react react-relay graphql graphql-relay react-dom to update your dependencies.