Created
February 11, 2017 08:29
-
-
Save hailwood/e0509a8f649853f5cd95ee75e99c8a87 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#This is the core query that gives me the information I want in the final component when run through graphiql | |
viewer { | |
user { | |
id, | |
name | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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')} | |
} | |
} | |
` | |
} | |
}, | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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')} | |
} | |
` | |
} | |
}, | |
) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
} | |
` | |
} | |
}, | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment