Infinite Scrolling and merge props not working as expected #2057
Description
Version:
@inertiajs/reactversion: 2.0.0-beta.2
Describe the problem:
When using api resources as a response it behaves like it did in version 1 no merging strategy is made here it just returns the second page instead of merging the data property.
return Inertia::render('Index', [
'posts' => Inertia::merge(PostResource::collection($posts))
]);
On the UI side i'm using a function to get the next results.
const { data, meta, links } = posts;
function loadNext() {
if (links.next) {
router.get(links.next);
}
}
Your code doesn't seem to take standard laravel pagination responses into account. Maybe if there was a way to define a merging strategy that would be great so it can accommodate various different responses?
protected mergeProps(pageResponse: Page): void {
if (this.requestParams.isPartial() && pageResponse.component === currentPage.get().component) {
const propsToMerge = pageResponse.mergeProps || []
propsToMerge.forEach((prop) => {
const incomingProp = pageResponse.props[prop]
if (Array.isArray(incomingProp)) {
pageResponse.props[prop] = [...((currentPage.get().props[prop] || []) as any[]), ...incomingProp]
} else if (typeof incomingProp === 'object') {
pageResponse.props[prop] = {
...((currentPage.get().props[prop] || []) as Record<string, any>),
...incomingProp,
}
}
})
pageResponse.props = { ...currentPage.get().props, ...pageResponse.props }
}
}