Handling Paginated Queries with React Query

import { useInfiniteQuery } from 'react-query';
import axios from 'axios';

const fetchProjects = async ({ pageParam = 1 }) => {
  const res = await axios.get(`/api/projects?page=${pageParam}`);
  return res.data;
};

function Projects() {
  const { data, error, fetchNextPage, hasNextPage, isFetching, isFetchingNextPage, status } = useInfiniteQuery('projects', fetchProjects, {
    getNextPageParam: (lastPage, pages) => lastPage.nextPage ?? false
  });

  if (status === 'loading') return <p>Loading...</p>;
  if (status === 'error') return <p>Error: {error.message}</p>;

  return (
    <>
      {data.pages.map((page, i) => (
        <React.Fragment key={i}>
          {page.items.map(project => (
            <p key={project.id}>{project.name}</p>
          ))}
        </React.Fragment>
      ))}
      <button
        onClick={() => fetchNextPage()}
        disabled={!hasNextPage || isFetchingNextPage}
      >
        {isFetchingNextPage
          ? 'Loading more...'
          : hasNextPage
          ? 'Load More'
          : 'Nothing more to load'}
      </button>
      <div>{isFetching && !isFetchingNextPage ? 'Fetching...' : null}</div>
    </>
  );
}