inertia
inertia copied to clipboard
feat: Add `preserveUrl` option.
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.