How do I implement pagination with SWR?

How do I implement pagination with SWR?

To implement pagination with SWR, you can use the useSWR hook along with a pagination API that supports offset or cursor-based pagination.

Can you show me a code example?

Sure! Here's a simple example:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

function PaginatedComponent() {
  const { data, error } = useSWR('/api/data?page=1', fetcher);

  if (error) return <div>Failed to load</div>;
  if (!data) return <div>Loading...</div>;

  return (
    <div>
      {data.items.map(item => <div key={item.id}>{item.name}</div>)}
      <button onClick={() => {/* logic to fetch next page */}}>Next</button>
    </div>
  );
}

This example fetches data from an API and displays it with a button to load the next page.

What if I want to implement infinite scrolling instead?

For infinite scrolling, you can modify the fetch logic to load more data as the user scrolls down. You can use the Intersection Observer API to detect when the user reaches the bottom of the page and then fetch the next set of data.