core-query.graphql

#This is the core query that gives me the information I want in the final component when run through graphiql

viewer {
   user {
      id,
      name
   }
}

Full.jsx

/* This is the main layout component */

class Full extends Component {

    static propTypes = {
        viewer: React.PropTypes.object.isRequired
    };

    render() {
        return (
            <div className="app">
                <Header viewer={this.props.viewer.user}/>
                <div className="app-body">
                  {this.props.children}
                </div>
            </div>
        );
    }
}

export default Relay.createContainer(Full, {
        fragments: {
            viewer: () => Relay.QL`
                fragment on user {
                    id
                    user {
                        ${Header.getFragment('viewer')}
                    }
                }
            `
        }
    },
)

Header.jsx

class Header extends Component {

    constructor(props) {
        super(props);
    }

    static propTypes = {
        viewer: React.PropTypes.object.isRequired
    };

    render() {
        return (
            <header className="app-header navbar">
              <UserProfile viewer={this.props.viewer}/>
            </header>
        )
    }
}

export default Relay.createContainer(Header, {
        fragments: {
            viewer: () => Relay.QL`
                fragment on user {
                    id
                    ${UserProfile.getFragment('viewer')}
                }
            `
        }
    },
)

router.jsx

/* This is my router, I'm loading the dashboard route in this example */

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

<Router forceFetch environment={Relay.Store} render={applyRouterMiddleware(useRelay)} history={browserHistory}>
  <Route onEnter={userOnly}>
    <Route path="/" name="Home" component={Full} queries={ViewerQueries}>
      <IndexRoute component={Dashboard}/>
      <Route path="dashboard" name="Dashboard" component={Dashboard}/>
    </Route>
  </Route>
</Router>

UserProfile.jsx

class UserProfile extends React.Component {

    static propTypes = {
        viewer:   React.PropTypes.object
    }

    render() {
        return (
          <span>
            {this.props.viewer ? this.props.viewer.name : 'No one'}
          </span>
        )
    }
}

export default Relay.createContainer(UserProfile, {
        fragments: {
            viewer: () => Relay.QL`
                fragment on user {
                    id
                    name
                }
            `
        }
    },
)