How to implement pagination in this project?

[SimilArity]

Hi everyone,

I started learning Next JS and GraphQL with this project so I'm a beginner. I wanted to implement pagination a few days ago and still to this day, I'm lost.

Did someone manage to achieve that?

[SimilArity]

Hi everyone,

I'm still trying to do the pagination. Could someone help me with this:

This is my main index.js : https://controlc.com/32243536

And this is my index.js (services : https://controlc.com/511f7e29

Should I use useEffect or something like useSWR?

I'm stuck for a long time now. I hope someone will see this and kindly guide me ...

[SimilArity]

Am I the only one right here who want to implement pagination on this blog? :/

[wanyama413]

Hi, I want to implement pageanation too but yet to figure it out

[arlbdt]

I used this : https://www.npmjs.com/package/react-paginate

The code i used:

function Posts({currentPosts}) {
    return (
      <>
        {currentPosts &&
          currentPosts.map((post, index) => (
            <PostCard key={index} post={post.node} />
          ))}
      </>
    );
  }

  function PaginatedPosts({itemsPerPage}) {
    // We start with an empty list of items.
    const [currentPosts, setCurrentPosts] = useState(null);
    const [pageCount, setPageCount] = useState(0);
    // Here we use item offsets; we could also use page offsets
    // following the API or data you're working with.
    const [itemOffset, setItemOffset] = useState(0);

    useEffect(() => {
      // Fetch items from another resources.
      const endOffset = itemOffset + itemsPerPage;
      console.log(`Loading items from ${itemOffset} to ${endOffset}`);
      setCurrentPosts(posts.slice(itemOffset, endOffset));
      setPageCount(Math.ceil(posts.length / itemsPerPage));
    }, [itemOffset, itemsPerPage]);

    // Invoke when user click to request another page.
    const handlePageClick = e => {
      const newOffset = (e.selected * itemsPerPage) % posts.length;
      console.log(
        `User requested page number ${e.selected}, which is offset ${newOffset}`
      );
      setItemOffset(newOffset);
    };

    return (
      <>
        <Posts currentPosts={currentPosts} />
        <ReactPaginate
          nextLabel="next >"
          previousLabel="< previous"
          onPageChange={handlePageClick}
          pageRangeDisplayed={3}
          marginPagesDisplayed={2}
          pageCount={pageCount}
          pageClassName="page-item"
          pageLinkClassName="page-link"
          previousClassName="page-item"
          previousLinkClassName="page-link"
          nextClassName="page-item"
          nextLinkClassName="page-link"
          breakLabel="..."
          breakClassName="page-item"
          breakLinkClassName="page-link"
          containerClassName="pagination"
          activeClassName="active"
          renderOnZeroPageCount={null}
        />
      </>
    );
  }`

Then insert the component:

<PaginatedPosts itemsPerPage={5} />

[arlbdt]

You will have to do some css to customize it (use the classnames of the ReactPaginate component)

[arlbdt]

Create a component and reuse it for the categorie page aswell

[alexbennycodes]

Infinite Scroll seems like a better option rather than pagination.

React Infinite Scroll - I have used this npm package for some of my projects