react-apollo-pagination

1.0.13 • Public • Published

npm

react-apollo-pagination

A react hook for pagination in apollo-client.

Support cursor-based relay pagination.

Demo

https://codesandbox.io/s/xenodochial-waterfall-68ygx  

Requirements

server use relay cursor specification (https://facebook.github.io/relay/graphql/connections.htm)
query must contain:

  • $first, $after,
  • @connection(key: "uniqname3"),
  • edges.node,
  • pageInfo

Usage

Install

npm install react-apollo-pagination
import React from "react";
import ApolloClientBoost, { gql } from "apollo-boost";
import { ApolloProvider, withApollo } from "react-apollo";
import { usePagination } from "react-apollo-pagination";

import TableView from "./TableView";

const client = new ApolloClientBoost({
  uri: "https://graphql-compose.herokuapp.com/userForRelay"
});

const FEED_QUERY = gql`
  query FeedQuery($first: Int, $after: String, $last: Int, $before: String, $sort: SortConnectionUserRelayEnum) {
    userConnection(first: $first, after: $after, last: $last, before: $before, sort: $sort ) @connection(key: "uniqname3") {
      edges {
        cursor
        node {
          id
          name
          age
          contacts {
            email
            phones
          }
        }
      }
      pageInfo {
        hasNextPage
        hasPreviousPage
        startCursor
        endCursor
      }
    }
  }
`;
const ITEMS_PER_PAGE = 4;

const styles = {
  container: { display: 'flex', width: '50%', justifyContent: 'space-around' },
  navlinkOn: { color: 'black', cursor: 'pointer'}, 
  navlinkOff: { color: 'gray', cursor: 'not-allowed'}, 
}

const PaginatedTableWithApollo = withApollo(function PaginatedTable(props) {
  const {
    hasPrevPage,
    goPrevPage,
    hasNextPage,
    goNextPage,
    loading,
    data,
    error,
    arPageNums,
    goPage,
    pageNum
  } = usePagination(props.client, { query: FEED_QUERY, variables: {sort: '_ID_ASC'} }, ITEMS_PER_PAGE);

  return (
    <React.Fragment>
      <h1>Cursor-based pagination Relay</h1>
      <TableView loading={loading} data={data} error={error} />
      <div style={styles.container}>
        <div
          style={ hasPrevPage ? styles.navlinkOn : styles.navlinkOff }
          onClick={goPrevPage}
        >
          Previous
        </div> 
        {pageNum}
        <div
          style={ hasNextPage ? styles.navlinkOn : styles.navlinkOff }
          onClick={goNextPage}
        >
          Next
        </div>
      </div>
    </React.Fragment>
  );
});

function App() {
  return (
    <ApolloProvider client={client}>
      <PaginatedTableWithApollo />
    </ApolloProvider>
  );
}

export default App;

Roadmap

  • add offset-based pagination
  • add cursor-based pagination not-relay

Package Sidebar

Install

npm i react-apollo-pagination

Weekly Downloads

3

Version

1.0.13

License

ISC

Unpacked Size

50.8 kB

Total Files

9

Last publish

Collaborators

  • pavel-poroskov