Infinite Query Data

[yoonlee201]

Hi I'm trying to use the useInfiniteQuery but It's not working as I intended. I was willing th retrive 10 items (productItemType) at a time when loading, but It loads all 900 items at one instead even using _limit:10.

Here is the result when I load it:

Here is the type:

export interface productListType {
    list: productItemType[];
    count: number;
}

export interface productItemType {
    productSeq: number;
    name: string;
    price: number;
    brand: string;
    image: string;
    favorite: boolean;
    sale?: {
        salePrice: number;
        saleRate: number;
    };
}

This is the code:

//------------------------------------------
export async function getProductSaleList({
    pageParam = 1,
}: {
    pageParam?: unknown;
}): Promise<productItemType[]> {
    try {
        //this returns productListType to data
        const response = await axios.get<productListType>(url, {
            params: {
                _page: pageParam,
            },
        });
        console.log('RES:', response.data);
        return response.data.list;
    } catch (error) {
        throw new Error('Failed to fetch product sale list');
    }
}

Rest of the code:

export function useGetProductSaleList() {
    return useInfiniteQuery<productItemType[], Error>({
        queryKey: ['productSale'],
        queryFn: getProductSaleList,
        initialPageParam: undefined,
        getNextPageParam: (lastPage, allPages) => {
            // Assume there is a way to determine if there's more data (e.g., a lastPage.nextCursor)
            return lastPage.length ? allPages.length + 1 : undefined;
        },
    });
}

//------------------------------------------

import React from 'react';
import { productItemType } from '@/types/Product/productList';
import { useGetProductSaleList } from '@/hooks/query/product';

export default function SaleContent() {
    const {
        data,
        fetchNextPage,
        hasNextPage,
        isFetching,
        isFetchingNextPage,
        status,
    } = useGetProductSaleList();

    const observer = React.useRef<IntersectionObserver | null>(null);
    const lastProductRef = React.useCallback(
        (node: HTMLLIElement | null) => {
            if (isFetchingNextPage) return;
            if (observer.current) observer.current.disconnect();
            observer.current = new IntersectionObserver((entries) => {
                if (entries[0].isIntersecting && hasNextPage) {
                    fetchNextPage();
                }
            });
            if (node) observer.current.observe(node);
        },
        [isFetchingNextPage, fetchNextPage, hasNextPage],
    );

    const saleList = data?.pages.flatMap((x) => x) || [];

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

    console.log('Current data:', data); // Add this line for debugging
    console.log(hasNextPage);

    return (
        <div>
            <ul>
                {saleList.map((item: productItemType, index: number) => {
                    if (index === saleList.length - 1 && hasNextPage) {
                        return (
                            <li ref={lastProductRef} key={item.productSeq}>
                                {item.name}
                            </li>
                        );
                    }
                    return <li key={item.productSeq}>{item.name}</li>;
                })}
            </ul>
            {isFetchingNextPage && <p>Loading more...</p>}

            {!isFetching && !hasNextPage && saleList.length !== 0 && (
                <p className="text-regular py-4">
                    These are all of your notifications for now!
                </p>
            )}
        </div>
    );
    // return <div>hi</div>;
}

[TkDodo]

but It loads all 900 items at one instead even using _limit:10.

it loads whatever you tell it to load because you do the actual data fetching. Your call to axios.get probably doesn't set a _limit param (at least judging from the code I can see). You can easily see in the network tab of the browser devtools what you send and what you get back.

[yoonlee201]

I actually found the problem. Just me being so dumb.
I was using msw and didn't know that I needed to change the data to send. Thank you for helping!