Proper way of implementing infinite scroll without adding parameters to URL?

[AtteR]

Hello,

Seems Inertia 2.0 added new ways of implementing infinite scrolling, but I cannot figure out proper way of implementing this without adding parameters to the URL? So for example this:

            <WhenVisible
                :params="{
                    data: { page: 1 },
                    only: ['users']
                }"
                >

Adds ?page=1 to the URL. There is probably some way of implementing this correctly, but I cannot figure it out.

Thanks

[AtteR]

Found a solution:

This to your Vue component script:

const currentPage = ref<number>(1);

Then in Vue:

            <WhenVisible
                :key="currentPage"
                :params="{
                    data: { page: currentPage + 1 },
                    only: ['projects'],
                    preserveUrl: true,
                    onSuccess: () => {
                        currentPage += 1;
                    }
                }"
            >
            </WhenVisible>

Some info:
:key is must, because otherwise only two pages are loaded on bigger screen sizes, giving :key, all the pages all loaded in bigger screen sizes.
preserveUrl:true makes it so that the URL is not appended with something like ?page=1

You can return pagination component from the controller if you wish, I have the currentPage tracking directly in frontend.

Then from controller using Inertia::merge:

'projects' => Inertia::merge(fn () => ...),

You can merge the results.

This is very simplistic way of implementing this, you can easily add features what you need.