{"id":17188699,"url":"https://github.com/itzsaga/use-lazy-pagination","last_synced_at":"2026-04-13T02:05:58.228Z","repository":{"id":47927452,"uuid":"229138249","full_name":"itzsaga/use-lazy-pagination","owner":"itzsaga","description":"Bi-directional GraphQL React hook for use with Apollo's useLazyQuery.","archived":false,"fork":false,"pushed_at":"2023-10-24T13:33:01.000Z","size":817,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-05-27T19:55:49.613Z","etag":null,"topics":["graphql","hooks","pagination","react","react-hooks","reactjs"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/itzsaga.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-12-19T21:02:52.000Z","updated_at":"2023-07-18T09:10:54.000Z","dependencies_parsed_at":"2024-10-15T01:09:41.355Z","dependency_job_id":"7671f0ad-1dbe-45c5-a8e8-bba179cc4479","html_url":"https://github.com/itzsaga/use-lazy-pagination","commit_stats":{"total_commits":17,"total_committers":3,"mean_commits":5.666666666666667,"dds":"0.47058823529411764","last_synced_commit":"f740be53bf7f99aae0a0f6f2f864593899385a23"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzsaga%2Fuse-lazy-pagination","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzsaga%2Fuse-lazy-pagination/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzsaga%2Fuse-lazy-pagination/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/itzsaga%2Fuse-lazy-pagination/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/itzsaga","download_url":"https://codeload.github.com/itzsaga/use-lazy-pagination/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245401376,"owners_count":20609163,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","hooks","pagination","react","react-hooks","reactjs"],"created_at":"2024-10-15T01:09:38.575Z","updated_at":"2026-04-13T02:05:58.220Z","avatar_url":"https://github.com/itzsaga.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# @itzsaga/use-lazy-pagination\n\n[![npm version][npm-version-image]][npm-version-link]\n\nBi-directional pagination hook for use in React using GraphQL \u0026 the Relay cursor-based pagination. Expecting an Apollo `useLazyQuery` function. Thanks to a [blog post][inspiration] by Tim Specht for the inspiration.\n\n## Installation\n\n```bash\n$ npm i @itzsaga/use-lazy-pagination\n```\n\nor\n\n```bash\n$ yarn add @itzsaga/use-lazy-pagination\n```\n\n## Usage\n\nThe hook expects a single argument, the query function returned from the `@apollo/react-hooks` `useLazyQuery` hook.\n\n```javascript\nconst { goBack, goForward } = useLazyPagination(queryPosts);\n```\n\n### Return\n\nThe hook returns an object with 4 things on it.\n\n| Return Value    | Description                                             |\n| :-------------- | :------------------------------------------------------ |\n| currentPage     | The current page you are on in the stack, defaults to 1 |\n| goBack          | A function that moves you back a page                   |\n| goForward       | A function that move you forward a page                 |\n| resetPagination | A function that resets the pagination state             |\n\nNote: `goForward` expects a single argument of the `endCursor` provided in the `pageInfo` from the query. This is how the stack is built.\n\n## Example\n\n```javascript\nimport React from \"react\";\nimport { useLazyQuery } from \"@apollo/react-hooks\";\nimport useLazyPagination from \"@itzsaga/use-lazy-pagination\";\n\nfunction App() {\n  const [ queryPosts, { data, error, loading } ] = useLazyQuery(QUERY_POSTS);\n  const { currentPage, goBack, goForward, resetPagination } = useLazyPagination(\n    queryPosts\n  );\n\n  if (error) return \u003cdiv\u003eError.\u003c/div\u003e;\n\n  if (loading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton disabled={currentPage === 1} onClick={() =\u003e goBack()}\u003e\n        Back\n      \u003c/button\u003e\n      \u003cdiv\u003eYou are on page {currentPage}.\u003c/div\u003e\n      \u003cbutton onClick={() =\u003e goForward(data.Posts.pageInfo.endCursor)}\u003e\n        Forward\n      \u003c/button\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Contributing\n\nBug 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.\n\n## License\n\nThe app is available as open source under the terms of the [MIT License][license].\n\n[greenkeeper-image]: https://badges.greenkeeper.io/itzsaga/use-lazy-pagination.svg\n[greenkeeper-link]: https://greenkeeper.io/\n[npm-version-image]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination.svg\n[npm-version-link]: https://badge.fury.io/js/%40itzsaga%2Fuse-lazy-pagination\n[inspiration]: https://engineering.dubsmash.com/bi-directional-pagination-using-graphql-relay-b523c919c96\n[repo-url]: https://github.com/itzsaga/use-lazy-pagination\n[contributing]: ./CONTRIBUTING.md\n[license]: ./LICENSE\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzsaga%2Fuse-lazy-pagination","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fitzsaga%2Fuse-lazy-pagination","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fitzsaga%2Fuse-lazy-pagination/lists"}