In this episode, we check out an awesome new feature in Inertia: merging props instead of just overwriting them! This makes a big difference for features like infinite scroll or notifications where you want to add new items to existing data on your page, instead of replacing everything every time.
We start by building out a basic dashboard with some notification props. First, we see how things worked before — every time we sent a new notification, the old one got completely replaced. That’s not always what you want!
Next, we try out Inertia’s new merge
feature. This lets us tell Inertia to automatically merge new props (like notifications) into our existing array right on the client side. After setting it up, each time we add a notification, it gets pushed right onto the list without any fancy array handling in our own code.
We run into a little road bump (thanks, beta!), but with a quick fix—specifying the prop we want to merge—we get everything working as expected. Now, we can keep adding notifications and see them build up in our UI just like magic.
To round things off, we show how to reset the notifications list from the client, perfect for when you want to clear things out (or test your code a bunch of times).
All together, this is a great demo of how merging props can simplify your data handling in Inertia, especially for any situation where you want to append data, like notifications or infinite scroll (which we’ll cover later!).