deepMerge() still replaces the data instead of merging it #762
Description
PHP package version
2.0.3
Inertia adapter(s) affected (if any)
- React
- Vue 3
- Svelte
- Not Applicable
Backend stack
PHP 8.4
Laravel 12.20.0
Describe the problem
Deep merging a paginated list in an infinite scroll situation replaces the data instead of merging to it.
Steps to reproduce
I have an extremely simply example with posts that have an id, a title and content.
In the controller I simply deepMerge the paginated posts like this:
class PostController extends Controller
{
public function index()
{
return Inertia::render('Posts/index', [
'posts' => Inertia::deepMerge(Post::paginate(10))
]);
}
}
and in my react component I use the WhenVisible component to load more:
const Index = ({ posts }: { posts: PaginatedPosts }) => {
const hasMorePages = posts.current_page < posts.last_page;
console.log(posts);
return (
<div>
<div className="space-y-6">
{posts.data.map((post) => (
<div key={post.title} className="flex flex-col gap-6 rounded border p-4">
<h2 className="text-xl font-semibold">{post.title}</h2>
<p className="text-gray-600">{post.content}</p>
<span>{new Date(post.created_at).toLocaleString('bg-BG')}</span>
</div>
))}
</div>
{hasMorePages && (
<WhenVisible
always
params={{
data: {
page: posts.current_page + 1,
},
}}
fallback={
<div className="flex justify-center py-8">
<div className="flex items-center gap-2">
<div className="h-4 w-4 animate-spin rounded-full border-2 border-blue-500 border-t-transparent"></div>
<span className="text-gray-600">Loading more posts...</span>
</div>
</div>
}
>
<div className="py-8 text-center text-gray-500">Scroll down to load more posts</div>
</WhenVisible>
)}
{!hasMorePages && posts.data.length > 0 && <div className="py-8 text-center text-gray-500">No more posts to load</div>}
</div>
);
};
What happens is when I scroll the data is received successfully, however it's not merged and instead is being replaced.
I thought deepMerge() solves this but in my case it does not.
Also as a side-note, not to be hyper-critical but both the merge,deepMerge and WhenVisible documentation is extremely sparse, for example when it comes to the WhenVisible component it doesn't specify what each prop does so it's kind of a guessing game.