https://github.com/itzsaga/use-lazy-pagination

Bi-directional GraphQL React hook for use with Apollo's useLazyQuery.
https://github.com/itzsaga/use-lazy-pagination

graphql hooks pagination react react-hooks reactjs

Last synced: 22 days ago
JSON representation

Bi-directional GraphQL React hook for use with Apollo's useLazyQuery.

• Host: GitHub
• URL: https://github.com/itzsaga/use-lazy-pagination
• Owner: itzsaga
• License: mit
• Created: 2019-12-19T21:02:52.000Z (almost 5 years ago)
• Default Branch: master
• Last Pushed: 2023-10-24T13:33:01.000Z (about 1 year ago)
• Last Synced: 2024-05-27T19:55:49.613Z (5 months ago)
• Topics: graphql, hooks, pagination, react, react-hooks, reactjs
• Language: TypeScript
• Homepage:
• Size: 798 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Contributing: CONTRIBUTING.md
  • License: LICENSE
  • Code of conduct: CODE_OF_CONDUCT.md

Awesome Lists containing this project

README

        
# @itzsaga/use-lazy-pagination

[![Greenkeeper badge][greenkeeper-image]][greenkeeper-link] [![npm version][npm-version-image]][npm-version-link]

Bi-directional pagination hook for use in React using GraphQL & the Relay cursor-based pagination. Expecting an Apollo `useLazyQuery` function. Thanks to a [blog post][inspiration] by Tim Specht for the inspiration.

## Installation

```bash

$ npm i @itzsaga/use-lazy-pagination

```

or

```bash

$ yarn add @itzsaga/use-lazy-pagination

```

## Usage

The hook expects a single argument, the query function returned from the `@apollo/react-hooks` `useLazyQuery` hook.

```javascript

const { goBack, goForward } = useLazyPagination(queryPosts);

```

### Return

The hook returns an object with 4 things on it.

| Return Value    | Description                                             |

| :-------------- | :------------------------------------------------------ |

| currentPage     | The current page you are on in the stack, defaults to 1 |

| goBack          | A function that moves you back a page                   |

| goForward       | A function that move you forward a page                 |

| resetPagination | A function that resets the pagination state             |

Note: `goForward` expects a single argument of the `endCursor` provided in the `pageInfo` from the query. This is how the stack is built.

## Example

```javascript

import React from "react";

import { useLazyQuery } from "@apollo/react-hooks";

import useLazyPagination from "@itzsaga/use-lazy-pagination";

function App() {

  const [ queryPosts, { data, error, loading } ] = useLazyQuery(QUERY_POSTS);

  const { currentPage, goBack, goForward, resetPagination } = useLazyPagination(

    queryPosts

  );

  if (error) return 
Error.
;


  if (loading) return 
Loading...
;


  return (

    


       goBack()}>

        Back

      

      
You are on page {currentPage}.

       goForward(data.Posts.pageInfo.endCursor)}>

        Forward

      

    

  );

}

```


## Contributing

Bug reports and pull requests are welcome on GitHub at [https://github.com/itzsaga/use-lazy-pagination][repo-url]. If you would like to help with this project see our [Contributing][contributing] doc for more info.

## License

The app is available as open source under the terms of the [MIT License][license].

[greenkeeper-image]: https://badges.greenkeeper.io/itzsaga/use-lazy-pagination.svg

[greenkeeper-link]: https://greenkeeper.io/

[npm-version-image]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination.svg

[npm-version-link]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination

[inspiration]: https://engineering.dubsmash.com/bi-directional-pagination-using-graphql-relay-b523c919c96

[repo-url]: https://github.com/itzsaga/use-lazy-pagination

[contributing]: ./CONTRIBUTING.md

[license]: ./LICENSE