How to integrate API with useInfiniteQueries?

[omatrebym]

My backend is returning an object

{
    data: ExampleType[],
    nextCursor?: Int
}

With a page size of 10, my backend will return nextCursor = data.Count() + pageSize if there are enough elements left in the db, and it will return 10 more elements for each "load more"-click.

But if I render

const { data } = useInfinteQueries(["example"], ({ pageParam = 10 }) => getExample(pageParam).then(r => r.data), {
        getNextPageParam: lastPage => lastPage.nextCursor ?? undefined
    })

return (
    <ul>
        {data?.pages.flatMap(page => page.data).map(x => (
            <li>x.data.exampleProperty</li>
        ))}
    </ul>
)

all the previous elements is appended to the list one more time. So if I have 10 elements and try to fetch the 10 next, 30 elements are rendered. And if I fetch 10 more, 60 elements are rendered. And the next is 100 rendered elements.

Am I supposed to send only ten elements at a time from backend or is there something wrong with the implementation frontend?

[omatrebym]

I figured out that I just misunderstood the workings of useInfiniteQueries, the backend has to be page based since React Query appends the next elements instead of fetching all elements limited by a cursor.