How to load more data as a result of button click for data fetching that require pagetoken?

Question

I'd like to implement pagination by having a button to load more data from youtube api. To go to next/ previous pages, youtube api require pagetoken. As a beginner, while I know how to fetch the initial data, I don't know how to load more data using pagetoken in a useEffect hook. I thought if I create onClick event on the button and pass the initial fetch function in it, that would solve the problem but it doesn't. So here's my code :

function VideoList() {
  const [videoList, setvideoList] = useState([]);
  const [pageToken, setPageToken] = useState("");

  const baseURL = `https://youtube.googleapis.com/youtube/v3/activities?part=snippet`;
  const maxResults = `maxResults=20`;
  const channelId = `channelId=${process.env.REACT_APP_CHANNEL_ID}`;
  const apiKey = `key=${process.env.REACT_APP_API_YOUTUBE}`;
  const request = `${baseURL}&${channelId}&${apiKey}&${maxResults}${pageToken}`;

  const fetchVideos = async () => {
    try {
      const response = await axios.get(request);
      const responseResult = response.data;
      setvideoList(responseResult.items);
      setPageToken(`&pageToken=${responseResult.nextPageToken}`);
    } catch (error) {
      console.log(error.message);
    }
  };

  useEffect(() => {
    fetchVideos();
  }, []);

  if (videoList.length === 0) {
    return null;
  }

  return (
    <>
      <NavBar />
      <div className="m-8">
        <VideoCard videos={videoList} />
        <button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow"
          onClick={fetchVideos()}
        >
          More Videos
        </button>
      </div>
      <SiteFooter />
    </>
  );
}

export default VideoList;

However, when I click the button, the following error happened

Warning: Expected onClick listener to be a function, instead got a value of object type.

Any idea how to correctly implement this? Help would be very much appreciated and thank you in advance!

Answer 1

I think the only thing you need is merge the old state with the new state:

 setvideoList((oldData) => [...oldData, ...responseResult.items]);

This is the link to React useState hook

Answer 2

I would do it like this (pseudocode):

const [pagination, setPagination] = useState(0);

const nextPage = () => {
   setPagination(pagination + 1);
}

useEffect(() => {
   fetchVideos(pagination);
}, [pagination])

onClick={nextPage}

Your onclick handler kind of depends if its a next arrow or if you click on an actual number, but it is all the same really, just need to write a handler for that.

Now everytime you change the pagination info, you will fetch the videos according to the pagination, you can also make pagination an object if you want to have multiple properties like itemsperpage, page etc.

EDIT:

Oh and regarding your error, you have to pass in the function name without parentheses.

onClick={fetchVideos} not onClick={fetchVideos()}

Answer 3

Since the API request remains the same except for the pageQuery I would pass that in as a parameter to the function.

 const fetchVideos = async (token) => {
  const request = `${baseURL}&${channelId}&${apiKey}&${maxResults}${token}`;

    try {
      const response = await axios.get(request);
      const responseResult = response.data;
      setvideoList(responseResult.items);
      setPageToken(`&pageToken=${responseResult.nextPageToken}`);
    } catch (error) {
      console.log(error.message);
    }
  };

Then we can use a useEffect to check for change in your local pageQuery state. We pass page token into the dependancy array (the array passed into the end of the function) which tells react to check for any changes in this property; if there is a change it will re-run everything within the useEffect hook (e.i, repeat the API request with the new value of pageToken)

useEffect(() => {
   fetchVideos(pageToken);
}, [pageToken])

Then in your onClick event handler you can update the state of pageToken. You've currently set it to an empty string but it might make more sense to set it to the number 0 and then add 1 on each click.

<button
          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded-full shadow"
          onClick={()=> { // update pagination }}
        >