inertia icon indicating copy to clipboard operation
inertia copied to clipboard

feat: Add `preserveUrl` option.

Open xiCO2k opened this issue 9 months ago • 3 comments

This PR adds an option to preserve the current url.

This is specially useful when there is an infinite scroll pagination.

Before

To the infinite scrolls using Inertia we had to do something similar to this:

const allPosts = ref(props.posts.data);
const nextPageUrl = ref(props.posts.next_page_url || null);
const loading = ref(false);

const load = () => {
    if (nextPageUrl.value === null) {
        return;
    }

    loading.value = true;
    axios.get(nextPageUrl.value, {
        headers: {
            'X-Inertia': true,
            'X-Inertia-Partial-Component': 'Posts/Index',
            'X-Inertia-Partial-Data': 'posts',
            'X-Requested-With': 'XMLHttpRequest',
            'X-Inertia-Version': usePage().version,
        },
    }).then(({ data }) => {
        nextPageUrl.value = data.props.posts.next_page_url;
        allPosts.value.push(...data.props.posts.data);
        loading.value = false;
    }).catch(() => {
        loading.value = false;
        router.get(nextPageUrl.value);
    })
}

let observer;

onMounted(() => {
    observer = new IntersectionObserver(
        entries => entries.forEach(entry => entry.isIntersecting && load()),
    );

    observer.observe(document.querySelector('footer'));
});

After

This this addiction, we can take advantage of the preserveUrl option, and pass it on the router.get method, like this:

const allPosts = ref(props.posts.data);

const load = () => {
    if (props.posts.next_page_url === null) {
        return;
    }

    router.get(props.posts.next_page_url, {}, {
        preserveState: true,
        preserveScroll: true,
        preserveUrl: true,
        only: ['posts'],
        onSuccess: () => allPosts.value.push(...props.posts.data)
    })
}

onMounted(() => {
    observer = new IntersectionObserver(
        entries => entries.forEach(entry => entry.isIntersecting && load()),
    );

    observer.observe(document.querySelector('footer'));
});

Without the preserveUrl it adds the ?page=2 to the url and if the user refreshes the page it will just show the page=2 content instead of both pages.

Let me know what you guys think about this feature.

Thanks, Francisco.

xiCO2k avatar May 01 '24 23:05 xiCO2k