New in Inertia
Playing
04. Merging props

Episodes

0%
Your progress
  • Total: 1h 27m
  • Played: 0m
  • Remaining: 1h 27m
Join or sign in to track your progress

Transcript

00:00
Inesha now allows props to be merged rather than overwritten and this is incredibly useful for
00:07
features like infinite scroll which we're going to take a look at a little bit later. But first let's take a look at this feature at a lower level and see how it works. Okay so let's go over to our dashboard and we're going to define out a prop in here and let's just say that we have a bunch of notifications that we want to show.
00:28
So this is going to be an array of notifications and we can go ahead and just dump them down here for now. Okay so over to our web routes let's go ahead and output these notifications and let's go and just set this as a really simple string within an array first. Okay so pretty obviously we just get an array with a single value dumped down. Now let's imagine that
00:53
we wanted to hit another route perhaps to flash a notification or do something else but instead of overwriting this we want to append onto it. Let's take a look at what this looks like. Okay so we're going to go ahead and create out here a route to post through to a notification and let's go ahead and create out a method in here and let's go ahead and just flash a message
01:19
to our session. So let's say session and flash. Let's flash a notification in here and let's just use string random to create out a random 10 letter string and then we're going to go ahead and return back. Now if we were to take all of the flash notifications and output them here what is going to happen? Or the latest flash notification what is going to happen? Well let's
01:46
go ahead and try this out. So we'll say session get notification and let's imagine that we wanted to wrap them in an array. Okay so over in the dashboard let's build out just a really simple button. So let's go ahead and wrap this first of all and let's go and create out a button here to add a notification. Okay so when we go ahead and click on this let's say be on click let's use
02:12
our router to make a request through to that notification page and that should be it. Okay if we come over to the browser we get null at the moment because of course there is nothing in here. Let's go over to our network tab just to keep an eye on what's coming through and let's go ahead and hit add notification. Okay yeah sure enough that random string in that notification array
02:36
has come through and if we check out the request here you can see that inside of the props we've got is the array for notifications. Now if we do this again what do we think is going to happen? Well over in here in our web routes we are just using an array with the current notification. So let's go ahead and hit add notification and you can see that it just basically changes around
03:01
the string. Now if we wanted to build this feature in Inertia v1 what we would have to do is either make just a standard HTTP request to a back end and then append this onto an array within JavaScript or we would have to go ahead and collect these up and pass them down. It gets a little bit cumbersome so what we can now do is instead decide that because this is an array we want to merge the
03:27
latest result in on the client side. Let's take a look at how that works. So all we do is we use either the Inertia facade or the Inertia helper and we say merge and then we pass in whatever we want to merge and we're actually going to do this as either a long or a short function. We're going to return the result of that, that is an array. Now for every request we make to this route and we
03:52
flash something into this notification session and we return back, when we return back from another route onto dashboard this is going to re-render what we have here. That's why we just saw that string value get replaced as a prop. Now that we're using merge what this is going to tell Inertia to do is because this is an array it's going to take whatever value that is returned and on the
04:15
client side it's going to automatically merge it for us. Once again this feature just adds the ability to wrap whatever we would usually write manually in our code with a pre-built feature. So let's go ahead and see what happens now that we have added merge. So I'm going to go ahead and just pull this over to the side so we can see what we're doing a little bit better and let's go
04:37
ahead and add in a notification. Okay sure enough that came through and if we take a look at our dashboard here and we take a look at our props you can see that we've got that notification in there. Let's hit add notification again and see what happens and this hasn't actually worked. I'm not sure if this is intended or it's just a bug within the beta but what we're actually going to have to
04:57
do here is specify the prop that we want to be merged specifically when we make this request. So let's say only notifications and that should work now. Okay let's go ahead and see the difference. I'm going to hit add notification again and you can see that despite we get the null value previously this is now adding on tier so we could add a check if we were building this functionality
05:19
from scratch wanted an array of notifications to be pushed to the front end we could obviously not use a null value but as you can see because this is an array now and we've used merge rather than the data that we get back here so you can see that we're still just getting this single notification from the back end this on the client side is being merged in. So basically rather than
05:44
have to take the data ourselves and merge it into an array this is happening by default. So with this functionality what you could do is build out some sort of notifications feature where this pushes to an array. Let's just tidy this up a little bit over in web and let's just return nothing here if we don't have any notifications. So we'll say if session has notification and we'll say if it
06:11
doesn't have a notification then we're just going to return a null value so that should work nicely. So now what we're going to do is see nothing and then as we add a notification this is just going to push that stack so you can kind of see how this is going to be useful for stuff like infinite scrolling where you have data that rather than just replace this is going to push onto an array of data.
06:34
Now what happens if we want to reset this well we can very easily do that as well over in the client side so for example if we wanted a reset button in here we could go ahead and send another request along so we could send a router reload request and we could just pass in the thing that we want to reset so let's go ahead and reset notifications back to its original state. Okay let's go over and
07:03
try this again obviously doesn't look great but let's add a few notifications in here let's press reset and that goes back to the initial state that we saw when we first landed on the page. So that is pretty much how merging props works not the most useful example but hopefully you can see how this works now it's taken away the need for us to on the client side take any new data
07:27
and append it to the props that we already have which we would have had to done previously and this feature works really nicely with infinite scroll which we're going to take a look at a little bit later. So there we go that is merging props we'll dive into this a little bit later when we look at infinite scrolling.

Episode summary

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!).

Episode discussion

No comments, yet. Be the first!