useInfiniteQuery and Prisma return Same Data when Clicked on Next Page

[firaki12345-cmd]

So this is my code for fetching infinite queres from prisma using The Cursor Method, but the problem is when i click on "LOAD MORE BUTTON" , it loads the next data but its the same as the previous one, what am i doing wrong here.

My Code Below:

'use client'

import { useInfiniteQuery } from '@tanstack/react-query';
import styles from './styles.module.css';
import { useState } from 'react';

const Get_data = () => {

    const [take, setTake] = useState(() => 2)
      
      const [skip, setSkip] = useState(() => 0)

      const [page, setPage] = useState(() => 5)
    
      
    
      const fetchprods = async (take,skip,page) => {
        try {
          const my_data = await fetch(`http://localhost:3000/api/products/${take}/${skip}/${page}`);
          const response = await my_data.json();
          return response;
        } catch (error) {
          console.error('Error fetching data:', error);
          throw error;
        }
      };
      
    
      const { data, fetchNextPage, hasNextPage, isFetching, isLoading} = useInfiniteQuery({
        queryKey: ['products',take,skip,page],
        queryFn: () => fetchprods(take,skip,page),

          // Use lastprodsid to get the next page

        getNextPageParam: (lastPage) => lastPage.lastprodsid,
      });
    
     const skeleton_arr = [1,2]

      if (isLoading) {
        // Return multiple lines of skeleton elements
        return (
          <>
            {skeleton_arr.map((item) => (
              <div key={item} className={`${styles.imgContainer} ${styles.skeleton}`}></div>
            ))}
          </>
        );
      }
    

  const handleNextPage = () => {
    fetchNextPage();
  };


  return (
    <>

    {data.pages.map((item) => (
          <div>{item.data.map((ok) => (
            <div className={styles.imgContainer} key={ok.id}>
            <a href={ok.links} target="_blank">
            <img className={styles.mainImage} src={ok.image} alt={`Product ${ok.id}`} />
            </a>
            </div>
          ))}</div>
        ))}

    {hasNextPage && (
        <button onClick={handleNextPage} disabled={isFetching}>
          {isFetching ? 'Loading...' : 'Load More'}
        </button>
      )}


    </>
  );
};

export default Get_data;

This paramater BELOW gets the Cursor id of the last image,

getNextPageParam: (lastPage) => lastPage.lastprodsid,

IF I Do the following below, it gets the next page, but previous data is not there anymore.

  const handleNextPage = () => {
  setSkip(1)
  setPage(data.pages[0].lastprodsid)
    fetchNextPage();
  };

PLEASE HELP.. THANKS

[TkDodo]

You're not using the pageParam that is passed into the queryFn

[firaki12345-cmd]

Hi thanks for the quick reply..

May I know what value shall I give it ?.. how can I give it the value of the image.id

[TkDodo]

please consult the docs and our examples. You likely don't need page in state, but derive it from getNextPageParam

• https://tanstack.com/query/v5/docs/react/guides/infinite-queries
• https://tanstack.com/query/v5/docs/react/examples/react/load-more-infinite-scroll

[firaki12345-cmd]

thanks a lot you were right.. i had to to pass the initialpageparams argument.

thanks, this library is awesome :)