Invariant Violation: RelayQueryNode: Invalid concrete node.

[boosh]

I'm getting an error "Invariant Violation: RelayQueryNode: Invalid concrete node." and my route isn't rendering when I try to view the relay route below ("test/VXNlcjoxMDI1").

I've no idea what's going on.

The static route renders fine, so it's not an issue with my router setup. If I remove the userId parameter from the URI and hardcode the initial value of the userId I get the same error, so it's not an issue with extracting the userID from the URI. If I turn the App into a relay component and add a queries property I get the same bug, only this time the app doesn't render at all.

So it seems there's a problem for some reason in my config with using relay routes.

Is this a bug or a problem with my setup? I've checked the docs again and again and I think I'm following them exactly.

Here's my code. app.js:

import {SimpleRelayTestContainer, SuperSimpleRelayTest} from './components/SimpleRelayTest';

import ReactDOM from 'react-dom';
import {Router, Route} from 'react-router';
import BrowserHistory from 'react-router/lib/BrowserHistory';
import ReactRouterRelay from 'react-router-relay';

const ViewerQueries = {
  viewer: () => Relay.QL`query { viewer }`
};

ReactDOM.render((
    <Router history={new BrowserHistory()} createElement={ReactRouterRelay.createElement}>
      <Route path="/" component={App} >
        <Route path="test" component={SuperSimpleRelayTest} />
        <Route path="test/:userId" component={SimpleRelayTestContainer} queries={ViewerQueries} />
      </Route>
    </Router>
), document.getElementById('root'));

App.js:

import 'babel/polyfill';
import {Link} from 'react-router';

class App extends React.Component {
  render() {
    var userId = "VXNlcjoxMDI1";

    return (
        <div>
          <h1>App</h1>
          <ul>
            <li>
              <Link to="/test">test static</Link>
            </li>
            <li>
              <Link to={`/test/${userId}`}>test</Link>
            </li>
          </ul>
          {this.props.children}
        </div>
    );
  }
}

export default App;

SimpleRelayTest.js:

import 'babel/polyfill';

export class SuperSimpleRelayTest extends React.Component {
  render() {
    console.log("inside SuperSimpleRelayTest");          // this works. I see this message
    return (
      <h1>static component</h1>
    );
  }
}

class SimpleRelayTest extends React.Component {
  render() {
    logger.trace("inside Simplerelaytest");            // never see this message
    return (
      <div>
        <h1>User details</h1>
        <ul>
          <li>ID: {this.props.viewer.user.id}</li>
        </ul>
      </div>
    );
  }
}

export var SimpleRelayTestContainer = Relay.createContainer(SimpleRelayTest, {
  initialVariables: {
    userId: null
  },

  fragments: {
    viewer: () => Relay.QL`
      fragment on Viewer {
        user(id: $userId) {
          id
        }
      }
    `
  }
});

package.json:

    "react": "^0.14.0-beta3",
    "react-bootstrap": "^0.25.100-react-pre.0",
    "react-relay": "^0.2.1",
    "react-dom": "^0.14.0-beta3",
    "react-router": "^1.0.0-beta3",
    "react-router-relay": "^0.4.4",

[taion]

This isn't really an issue with this library, then, if you can't get it to work even without using its routing.

What does your schema look like?

[boosh]

What do you mean? It works fine if I render a Relay.RootContainer directly:

React.render(
    <Relay.RootContainer
        Component={SimpleRelayTestContainer}
        route={new SimpleRelayTestRoute()}
    />,
    document.getElementById('root')
);

SimpleRelayTestRoute:

export default class extends Relay.Route {

  static queries = {
    viewer: () => Relay.QL`
      query { viewer }
    `,
  };

  static routeName = 'SimpleRelayTestRoute';
}

[taion]

Are you setting id in that case?

[boosh]

Yes, I hardcoded the user ID in the initialVariables part of the container to confirm that rendering a Relay.RootContainer directly worked. But when I tried that with react-router-relay it still didn't work. In fact, using react-router-relay the client doesn't even make a request to the server, so I can only think this could be caused by:

1. Schema validation failure - but this can't be the case or it'd fail when I render Relay.RootContainer directly,
2. Failure to parameterise correctly - but it should work in this case if I hardcode the userID, but this doesn't solve it.
3. A bug/incompatibility in the versions of the libraries I'm using.

[taion]

I'm afraid I can't help you further here without something like a working example that exhibits the problem. Nothing jumps out to me as being wrong. I'm using very similar patterns in my code and not seeing the problem.

[boosh]

OK. Is there a working sample project I can clone that I can use to try to pinpoint the problem? If not I'll create a minimal project that exhibits this issue.

[taion]

I'm working on a TodoMVC example with routing. For now, there's @cpojer's starter kit fork: https://github.com/cpojer/relay-starter-kit/tree/nested-routes-example

[taion]

See: https://github.com/taion/relay-todomvc

[boosh]

i checked out yours, and ran npm install. When I run npm start I get the following error:

ERROR in ./src/client.js
Module not found: Error: Cannot resolve module 'react-router/lib/HashHistory' in /me/relay-todomvc/src
 @ ./src/client.js 19:33-72

ERROR in ./~/react-router-relay/lib/getParamsForRoute.js
Module not found: Error: Cannot resolve module 'react-router/lib/RoutingUtils' in /me/relay-todomvc/node_modules/react-router-relay/lib
 @ ./~/react-router-relay/lib/getParamsForRoute.js 10:34-74

That's with npm 3.

[taion]

Oops, messed up a few of the dependencies. Try now.

[boosh]

OK. I also get a load of errors with cpojer's as well:

Mutation fields must be an object with field names as keys or a function which returns such an object

[boosh]

OK yours works now. I'll use it to try to get mine working. Thanks.

[boosh]

OK so I finally found out what is causing this. I needed the following imports in my components:

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

[taion]

Ah. Yeah. The Facebook examples are a little weird that way in how they pull those two in from browser globals. In general you do not want to follow that pattern. Glad you found the fix.

[stefanfoulis]

I had the same problem. Even adding the explicit React and Relay imports as suggested by @boosh did not help. Just today I did an npm install --save react react-relay graphql graphql-relay react-dom, which only upgraded graphql from 0.4.2 to 0.4.4. Then things suddenly started to work.

My package.json:

{
  "name": "relay-starter-kit",
  "private": true,
  "description": "A quick way to get up and running with Relay",
  "repository": "facebook/relay-starter-kit",
  "version": "0.1.0",
  "scripts": {
    "start": "babel-node ./server.js",
    "update-schema": "babel-node ./scripts/updateSchema.js"
  },
  "dependencies": {
    "babel": "5.8.21",
    "babel-loader": "5.3.2",
    "babel-relay-plugin": "0.2.3",
    "classnames": "^2.1.3",
    "express": "^4.13.1",
    "express-graphql": "0.3.0",
    "graphql": "^0.4.4",
    "graphql-relay": "^0.3.2",
    "react": "^0.14.0-rc1",
    "react-dom": "^0.14.0-rc1",
    "react-relay": "^0.3.2",
    "react-router": "^1.0.0-rc1",
    "react-router-relay": "^0.5.0",
    "webpack": "^1.12.2",
    "webpack-dev-server": "^1.11.0"
  }
}