relay-paging-hack.js

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
          }
        }
      }
    `
  }
});