Skip to content

Instantly share code, notes, and snippets.

@albertstill
Last active August 4, 2020 00:53
Show Gist options
  • Save albertstill/73f1e901e43c27898af5 to your computer and use it in GitHub Desktop.
Save albertstill/73f1e901e43c27898af5 to your computer and use it in GitHub Desktop.
Facebook Relay continuous scrolling example
class PostIndex extends React.Component {
state = { loading: false };
componentDidMount() {
window.onscroll = () => {
if (!this.state.loading
&& (window.innerHeight + window.scrollY)
>= document.body.offsetHeight) {
this.setState({loading: true}, () => {
this.props.relay.setVariables({
count: this.props.relay.variables.count + 5
}, (readyState) => { // this gets called twice https://goo.gl/ZsQ3Dy
if (readyState.done) {
this.setState({loading: false});
}
});
});
}
}.bind(this);
}
render() {
return (
<div>
<Header />
<div className={styles.postList}>
{this.props.query.posts.edges.map(edge =>
<PostPreview key={edge.node.id} post={edge.node} />
)}
{this.state.loading && <h1 className={styles.loading}>Loading...</h1>}
</div>
</div>
);
}
}
export default Relay.createContainer(PostIndex, {
initialVariables: {count: 15},
fragments: {
query: () => Relay.QL`
fragment on Session {
posts(first: $count) {
edges {
node {
id
${PostPreview.getFragment('post')}
}
}
}
}
`,
},
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment