Infinite Scroll using a range instead of cursor

[jinsley8]

The Infinite Scroll docs show an example using cursor pagination but I'm using a page range. Once I get to the end of the results content, instead of hasNextPage return false, it's returning true still and just loading an empty array as a new page.

Not sure how to checkhasNextPage using the range method as shown below:

// useInfiniteScroll hook
export function useInfiniteScroll(query: any, pageSize: number) {
    return useInfiniteQuery({
        queryKey: ['all-items', query, pageSize],
        queryFn: ({ pageParam = null }) => getItems(query, pageParam, pageSize),

        getNextPageParam: (lastPage, allPages) => {
            console.log('INFINITE: LAST PAGE - ', lastPage); // this returns the array of items
            console.log('INFINITE: LAST PAGE LENGTH - ', lastPage?.length); // this returns the length of array, 0 if no results
            
            const nextPage: number = allPages.length ?? undefined;
            return nextPage;
        },

        enabled: !!query,
        keepPreviousData: true,
    });
}

// getItems function
export const getItems = async (query: any, pageParam: number, pageSize: number) => {
    try {
        const data = await fetcher(
            `${SITE_API_URL}/items?page=${pageParam}&size=${pageSize}&${query}`,
            'GET'
        );

        return data;
    } catch (error) {
        throw error;
    }
};

// getPagination helper
export default function getPagination(page: number, size: number) {
    const limit = size ? +size : 12;
    const from = page ? page * limit : 0;
    const to = page ? from + size - 1 : size - 1;

    return { from, to };
}

// {api}/items...
// fetch from Supabase
const handler = async (req: AxiomAPIRequest, res: NextApiResponse) => {
    const {query, page, size } = req.query as {
        query: string;
        page: string;
        size: string;
    };

    const session = await getServerSession(req, res, authOptions);

    switch (req.method) {
        case 'GET':
            try {
                const { from: fromIndex, to: toIndex } = getPagination(Number(page), Number(size));

                const supabase = getSupabase(session?.supabaseAccessToken);

                let query = supabase
                    .from('items')
                    .select('*')
                    .range(Number(fromIndex), Number(toIndex));


                return res.status(200).json(data);
            } catch (error) {
                return res.status(500).json({ success: false, message: error.message });
            }

        default:
            res.status(405).send({ message: 'Method not allowed' });
            break;
    }
};

[jinsley8]

I figured it out and switched up the getNextPageParam in the query hook.

// useInfiniteScroll hook
export function useInfiniteScroll(query: any, pageSize: number) {
    return useInfiniteQuery({
        queryKey: ['all-items', query, pageSize],
        queryFn: ({ pageParam = null }) => getItems(query, pageParam, pageSize),

        getNextPageParam: (lastPage, allPages) => {
            // lastPage.length returns fetched page size
            // if last page length is less than pageSize then we know there won't be another page if fetched
            
            const nextPage: number | undefined = lastPage.length === pageSize ? allPages.length : undefined;
            return nextPage;
        },

        enabled: !!query,
        keepPreviousData: true,
    });
}