Example using createPaginationContainer from RelayJS.

ManageOrdersRelay.js

import React from 'react';
import PropTypes from 'prop-types';
import {graphql, QueryRenderer, createPaginationContainer} from 'react-relay';
import {Button} from 'react-bootstrap';

import environment from '@/environment';
import PageBar from '@/components/PageBar';
import Loading from '@/components/Loading';
import OrderTableRelay from '@/components/OrderTableRelay';

const manageOrdersQuery = graphql`
    query ManageOrdersRelayQuery($pageSize: Int!, $after: String) {
        ...ManageOrdersRelay_root
    }
`;

const PaginatedOrderTable = createPaginationContainer(
    (props) => (
        <span>
            <OrderTableRelay
                orders={props.root.orders}
                columns={[
                    'id',
                    'creationTime',
                    'dueDate',
                    'poNumber',
                    'totalQuantity',
                    'status',
                ]}
            />
            <Button
                onClick={() => (
                    props.relay.hasMore() &&
                    !props.relay.isLoading() &&
                    props.relay.loadMore(3, () => null)
                )}
            >
                Load More
            </Button>
        </span>
    ),
    {
        root: graphql`
            fragment ManageOrdersRelay_root on Query {
                orders(first: $pageSize, after: $after) @connection(key: "ManageOrdersRelay_orders") {
                    edges {
                        node {
                            ...OrderTableRelay_order
                        }
                    }
                    pageInfo {
                        hasNextPage
                        endCursor
                    }
                }
            }
        `,
    },
    {
        direction: 'forward',
        query: manageOrdersQuery,
        getConnectionFromProps: (props) => props.root.orders,
        getFragmentVariables: (previousVars, pageSize) => ({
            ...previousVars,
            pageSize,
        }),
        getVariables: (props, paginationInfo) => ({
            pageSize: 2,
            after: paginationInfo.cursor,
        }),
    },
);

const ManageOrders = ({routes}) => (
    <div className="page-content">
        <PageBar routes={routes} />
        <h1 className="page-title">Manage Orders</h1>
        <QueryRenderer
            environment={environment}
            query={manageOrdersQuery}
            variables={{pageSize: 1}}
            render={({error, props}) => {
                if (error) {
                    return <div><h1>Error!</h1><br />{error}</div>;
                }

                if (props) {
                    return (
                        <PaginatedOrderTable root={props} />
                    );
                }

                return <div><Loading /></div>;
            }}
        />
    </div>
);

ManageOrders.propTypes = {
    routes: PageBar.propTypes.routes,
};

export default ManageOrders;