2

I'm running into some trouble with react-router-relay and nested routes.

I have a router setup like the following: 

<Route path='/' component={App}>

    <IndexRoute component={EventList}/>

    <Route path="/events/:eventId" component={EventLayout} queries={eventQueries}>

        <IndexRoute component={EventDetails} queries={eventQueries}/>

        <Route path="details" component={EventDetails} queries={eventQueries}/>
        <Route path="sessions" component={Sessions} queries={eventQueries} >
            <Route path=":sessionId" component={SessionEditor} queries={eventQueries}/>
        </Route>

    </Route>

    <Route path="*" component={require('../components/NotFound.jsx')}/>

</Route>

route code here

when I get to /events/:eventId/sessions/:sessionId, my component is not being rendered at all.

I can see the graphql fragment for that component being returned from the server, but I have no component rendered.

I've posted some code here . If anyone could take a look, I'd be eternally grateful.

Chris
  • 57,622
  • 19
  • 111
  • 137
Chris Martin
  • 1,871
  • 16
  • 17
  • I'm getting a bit farther. I figured out that I have to actually *render* the children somewhere! LOL But, when I render them, I get a graphql error `allsFromGraphQL(): Expected a declared value for variable, $sessionId.`. I can see sessionId in params, it's not being assigned to props. – Chris Martin Oct 30 '15 at 07:52
  • The solution was to use a generic [node query](https://github.com/trbngr/react-router-relay-app/commit/c225b015d8d41c3a24fed5d162b0ab296c4bb443#diff-a73199f6b673a7742e2f8377e84da5d8R17) instead of a nested resource query. I'm not a huge fan of this. I don't care for the ugly globalId in my url. – Chris Martin Oct 30 '15 at 08:24

1 Answers1

1

The answer ended up being very simple. I don't need a node query. I needed to declare my sessionId variable in initialVariables.

The code will remain if anyone else needs an example.

Chris Martin
  • 1,871
  • 16
  • 17