Skip to content

Instantly share code, notes, and snippets.

@gallagher-stem
Last active April 5, 2016 21:27
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save gallagher-stem/d686caa4cf3aefe104bd to your computer and use it in GitHub Desktop.
import React from 'react';
import Relay from 'react-relay';
const pageSize = 2;
class Content extends React.Component {
componentWillMount() {
this.hasNextPage = this.props.user.next ? this.props.user.next.pageInfo.hasNextPage : false;
this.hasPreviousPage = this.props.user.prev ? this.props.user.prev.pageInfo.hasPreviousPage : false;
}
componentWillReceiveProps(nextProps) {
this.hasNextPage = nextProps.user.next ? nextProps.user.next.pageInfo.hasNextPage : this.hasNextPage;
this.hasPreviousPage = nextProps.user.prev ? nextProps.user.prev.pageInfo.hasPreviousPage : this.hasPreviousPage;
}
nextPage() {
this.hasPreviousPage = true;
const pageInfo = this.props.user.next ? this.props.user.next.pageInfo : this.props.user.prev.pageInfo;
const cursor = pageInfo.endCursor;
this.props.relay.setVariables({ after: cursor, next: true, prev: false });
}
prevPage() {
this.hasNextPage = true;
const pageInfo = this.props.user.next ? this.props.user.next.pageInfo : this.props.user.prev.pageInfo;
const cursor = pageInfo.startCursor;
this.props.relay.setVariables({ before: cursor, next: false, prev: true });
}
assetEdges() {
// get the next edges or the prev edges, or just get an empty array
return (this.props.user ?
(this.props.user.next ? this.props.user.next.edges :
(this.props.user.prev ? this.props.user.prev.edges : []))
: [])
}
render() {
const prevButton = this.hasPreviousPage ? <button onClick={ this.prevPage.bind(this) }>prev page</button> : '';
const nextButton = this.hasNextPage ? <button onClick={ this.nextPage.bind(this) }>next page</button> : '';
return (
<div>
<div>
{ this.assetEdges().map(edge => <AssetCard {...edge.node} key={ edge.node.__dataID__ } />) }
</div>
{ prevButton }
{ nextButton }
</div>
);
}
}
const AssetCard = props => {
return (
<div>
<h2>{ props.metadata.title }</h2>
<ul>
<li>artist: { props.metadata.artist }</li>
<li>label: { props.metadata.label }</li>
<li>genre: { props.metadata.genre }</li>
</ul>
</div>
)
}
export default Relay.createContainer(Content, {
initialVariables: {
first: pageSize,
last: pageSize,
after: null,
before: null,
next: true,
prev: false
},
fragments: {
user: () => Relay.QL`
fragment on Account {
next: assets(first: $first, after: $after) @include(if: $next) {
edges {
node {
metadata {
title
artist
label
genre
}
}
}
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
}
prev: assets(last: $last, before: $before) @include(if: $prev) {
edges {
node {
metadata {
title
artist
label
genre
}
}
}
pageInfo {
hasNextPage
hasPreviousPage
startCursor
endCursor
}
}
}
`
}
});
@dispalt
Copy link

dispalt commented Mar 23, 2016

you could combine next and prev and make one @skip and one @include

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