Skip to content

Instantly share code, notes, and snippets.

@eyston
Last active October 19, 2016 13:10
Show Gist options
  • Save eyston/d84efc5bc7df4e25842d to your computer and use it in GitHub Desktop.
Save eyston/d84efc5bc7df4e25842d to your computer and use it in GitHub Desktop.
Doing onEnter hooks with Relay that require data / async
const node = Relay.QL`
query {
node(id: $channelId) {
... on Channel {
joined
${JoinChannelMutation.getFragment('channel')}
}
}
}
`;
const onEnter = (nextState, replace, callback) => {
const {params: {channelId}} = nextState;
const query = Relay.createQuery(node, {channelId});
Relay.Store.primeCache({query}, readyState => {
if (readyState.done) {
const [channel] = Relay.Store.readQuery(query);
if (channel.joined) {
callback();
} else {
console.log('need to join');
Relay.Store.commitUpdate(new JoinChannelMutation({channel}), {
onSuccess: () => {
console.log('joined!');
callback()
},
onFailure: () => {
console.log('sad panda');
// replace ... like I have an error page
}
});
}
}
});
}
export default (
<Route
path=':channelId'
component={ChannelWrapper}
onEnter={onEnter}
/>
);
@koistya
Copy link

koistya commented Oct 19, 2016

"like I have an error page" 😄 😄 😄

@eyston BTW, wouldn't it be better to have this logic inside ChannelWrapper.componentWillMount()?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment