diligent-next/components/pagination/swr/PaginationComponentSWR.jsx

import { useState } from 'react';
import useSWRWithFallbackData from '../../../hooks/use-swr-with-initial-data';
import { getData } from '../../../requests/dataRequest';

const PaginationComponent = ({ initialData = {} }) => {
  const [pageIndex, setPageIndex] = useState(1);

  const fetcher = (page) => getData(page);
  const { data: paginationData } = useSWRWithFallbackData(pageIndex, fetcher, {
    fallbackData: initialData,
  });

  return (
    <div>
      {paginationData?.data?.map((item) => (
        <div key={item._id}>{item.name}</div>
      ))}
      <button
        disabled={pageIndex === 1}
        onClick={() => setPageIndex(pageIndex - 1)}
      >
        Previous
      </button>
      <button
        disabled={pageIndex * 5 > paginationData?.dataCount}
        onClick={() => setPageIndex(pageIndex + 1)}
      >
        Next
      </button>
    </div>
  );
};

export default PaginationComponent;