Project 19: Profile Settings Card

React Engineer

Builds on these lessons

Infinite Queries Redux Intro Redux Install

Step 1 of 3

Project

useInfiniteQuery for an Activity Log

Use useInfiniteQuery with a getNextPageParam function reading the next page number off the last response, and a fetchNextPage() call wired to a "Load more" button. It's built specifically for paginated data where each request depends on knowing where the last one left off.

🎯 Your Task

Please add the exact code shown in the light gray box below to your editor.Do not delete your previous code, just insert these new lines in the correct place!

import { useInfiniteQuery } from "@tanstack/react-query";

function fetchActivity({ pageParam = 1 }) {
  return fetch("/api/activity?page=" + pageParam).then((res) => res.json());
}

export default function ProfileSettingsCard() {
  const { data, fetchNextPage } = useInfiniteQuery({
    queryKey: ["activity"],
    queryFn: fetchActivity,
    getNextPageParam: (lastPage) => lastPage.nextPage
  });

  return (
    <div>
      <button onClick={() => fetchNextPage()}>Load more</button>
    </div>
  );
}

← Previous Next →