Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
21. Revisiting shared data for better flash messages

Episodes

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

Transcript

00:00
We're now going to revisit a few concepts that we've already learned to get this functionality working instead of manually doing this inside of an onSuccess.
00:10
So the first thing that we're going to do is get rid of the toast from onSuccess. So we're just back to how this worked before with no message at all. So if we want to redirect back with a particular flash message, how are we going to handle passing this through to the client side?
00:31
Well, we can actually do this with shared data. This is a good candidate for shared data. So we're going to go ahead and let's get rid of, well, we'll keep the greeting in there just for reference. Let's add in a message part of this.
00:45
So with this, what we can do is from the request, which we get available within this handleInertialRequestShare method, we can actually go ahead and grab out the session data for this. So we can say request session and get and then message like so.
01:02
So now what we can do is pick this up on the client side and just shove it. Let's look at a really simple example of that just over on the index template here. So let's do this down here, just above here. And remember, we access this with page, props, and then whatever prop we're trying to access.
01:22
At the moment, we don't see anything. But if we go ahead and post a message through, sure enough, we see comment posted. So if you wanted to create within your template just a global message that sat on the page like this, you could just very easily do that. For example, create out a div with a V4.
01:40
If page props message is available, you would want to go ahead and just show that in there. And that would be a VIF. And let's get rid of these braces. And then that would just show that message somewhere. And you could style that up based on when that gets set.
01:57
So we're redirected, we've shared that data, and we're showing it on the page. But what happens if we want to use some functionality like the library that we've just pulled in to get this to work? We can't trigger the library from within a template. And I'm just going to bring this back and comment this out so you have it as a reference.
02:15
So what we're going to do is head back up to our script section. This time, though, we're going to make use of use page, which we looked at earlier to watch for that value changing. So we're going to go and import watch from view. So we're looking at specific view functionality here.
02:34
And down here, we're going to go ahead and watch on use page or just page in this case, props and message. Now, we need to go ahead and put this into a closure here so it gets evaluated properly. And then in here, we have a closure which is called back when this value changes. But now let's just go ahead and console log out on the message just to see if this works.
02:56
So let's open up our console so we can keep an eye on this. I'm going to write a message in here, hit post. And sure enough, that is now console logged out. So we can make use of view specific functionality to watch for things like globals or anything else that are sent through with inertia.
03:13
In this case, it's a global prop that's getting passed through, which we're accessing with use page. Now, what we can do, though, is we can flash a message so we could say toast and message. And that's just going to work in exactly the same way. So let's go and say hello again, hit post.
03:33
And there we go. Sure enough, that now works. So we've recreated Laravel's normal functionality by redirecting with a message that we would typically pick up within some sort of blade template using our session helpers maybe. And we've shared that under handle inertia requests like this. And then we're very easily picking that up using the global props that are shared with that app.
03:57
Now, let's just finish off really quickly by making this a little bit more convenient. What we can actually do with this is we can pass through the type. So let's say error. And if we head back over and type something in, you can see that the visuals of this change.
04:13
So we can actually update the way that we send data down to this to make this work. Now, there are loads of different ways and more flexible ways that you could do this. For example, you can do with success with error. We have a short course on how to do that.
04:28
So if you want to add this functionality to your inertia apps, go ahead and check that out. But for now, what we're going to do is we're going to take this and change it to an array. We're going to give a body or a message, whatever you want to call it, and we're going to give a type specifically in here. So let's add this as let's add this as error for now, just so we can see that this actually works.
04:49
So even though we've got an array here and we are sharing that globally, now this will actually be an array. It will still be picked up within our client side in the same way. For example, if we console log out this message, that is going to when we post a comment, give us an object with the body and the type. So now what we can do is just swap these out with message body and message type.
05:20
And of course, it's going to work nicely, but also pass through that type as well. So let's head back over to our comment store controller, actually just change this over to success. And in the next episode, we're going to take this even further because at the moment we are still having to manually watch this on potentially every page that we have a form. So we're going to build out a global plugin which allows us to detect these and show this message on any single page.

Episode summary

In this episode, we're taking another look at how to handle flash messages (like success and error notifications) in an Inertia.js and Laravel app, but this time we're making it more maintainable using shared data instead of manually triggering toasts in onSuccess handlers.

We start by removing the manual toast logic from onSuccess and set up our app so messages are passed via session data. This way, after a redirect, the message gets picked up on the frontend as part of the Inertia shared props. You’ll see how we grab the session message in the controller, share it via Inertia, and then display it in our Vue component.

Next, we demonstrate how to use Vue's reactivity (watch) along with the usePage helper to detect when a message comes through and display it using our toast library, instead of just rendering the message inside the template. This lets us keep our UI responses dynamic and flexible.

We also improve our flash message approach by making the flash data more flexible: instead of just a string, we start passing through objects with both a body (the message itself) and a type (success, error, etc.). This way, our notifications can be styled or handled differently depending on their type.

By the end of the episode, you’ll have a much cleaner, reusable way to handle flash messages in your Inertia app – and as a teaser, in the next episode we’ll go even further by building a global plugin so any page can show these messages without repeating the same code everywhere!

Episode discussion

No comments, yet. Be the first!