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
17. Shared data

Episodes

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

Transcript

00:00
We've already kind of got a peek of this, but let's take a look now at shared data in inertia, which can be incredibly useful, but also comes with a warning that we'll talk about later.
00:09
So what I mean by shared data is the data that we've seen within our network XHR request when we're doing things like submitting forms. If I go ahead and post this through and we take a look at comments here, over in our props, we've got stuff like auth in here, errors and Ziggy. So where does this data come from? Where does this user data come from
00:30
that we're using globally throughout the application to show things like our name in the top just here? Well, we're going to head over to the handle inertia requests middleware, which exists under our middleware directory. And we're going to come all the way down here to this share section. Now you can see that we've got this call to parent share
00:50
that will contain things like the errors that are available globally, which we've already spoken about when we looked at validation. But we've also got things in here like auth, which is basically just passing down our user to every single component that we get rendered. So we're going to kind of ignore Ziggy for now, because we're going to talk about what that is
01:11
and how that works later. Auth is pretty obvious. Let's look at building up our own example. And we'll go back to the example of just outputting a really simple greeting that we can access. So now that we've added this to our share method over in handle inertia requests, this greeting is now available everywhere. When we reload the page, this data is now being passed
01:34
down to this component. It's being passed down to this page component as well. It's now available everywhere in our app. Now that can be a really good thing if you have data that you do need shared everywhere. But you need to be really careful about what you're sharing globally, just for the purpose of making your application a bit slower. So let's go ahead and access this
01:55
greeting, look at how we do that. And there are two different ways that we can do that. And then we'll talk through some more stuff. So I'm going to go over to the comments index page. And at the top of the page, let's just above the form, go ahead and access this with the page variable that's available everywhere in any component in our inertia application within view.
02:17
So this will contain, as we've already seen, props. We already used page to access errors globally earlier. And now that we've got access to the props, sure enough, we can access that greeting. So if we go over, sure enough, we see hello. So that can be accessed here. It could also be accessed over on the show page for the user. So we could output this just down here. And sure
02:42
enough, if we head over here, that greeting is still available. So basically just a way to share information through every single component in your application. Now, let's look at another way that we can access this data, because if you're working within your script section just here, you don't have access to page. Let's just demo that by
03:03
console logging page props and greeting. And if we go over here to our comments page, we get an error because it's just not available within our script section. So what if for any reason we need to access globally shared data inside of our script section? Once again, inertia comes with a composable called use page, which you can invoke and access any of
03:29
the data within the page object within inertia. So now what we can do is console log out use page invoked, then we can access props and then we can access the greeting. So this is just a way to manually go ahead and invoke and get back that data that you would see inside of that page variable that we've already used. So you can see here in the console that is being logged out.
03:53
So what is use page useful for and why would you do this within your script section? Well, let's take a look at an example of within the form loading in the body, the name of the user that's currently cited. You wouldn't do that, but let's go ahead and use that as an example. So in the body, then we want to grab the currently authenticated user and put their name in there.
04:16
Over in handle inertia requests, we've got auth already shared globally. So we access this through auth and then user. So in body, we know we can't do page props, auth and user and then name. That's just not going to work, of course, because we don't have access to page. It's undefined. So what we do is we use use page and typically we would assign this to a variable. So I would call
04:39
this page. I'd invoke it here and then down here I would say page props, auth, user and name. So now by default on that form, my name is inserted. So there are two ways that we can access global data and what global data actually is. We've already seen that with the shared errors that get shared when we have a validation error. But it's really important to note here that you
05:07
don't want to share too much data in here unnecessarily. For example, what you could technically do over in our let's go over to our comment index controller, you could technically return all posts globally. So you could in handle inertia request do this and it would still work and you could actually access all of the posts from your application like this as well. Just to
05:31
give you a demo of that over in the index page, let's go down to where we're iterating over all of our posts and that's just down here. We could say page props and posts. Now if we come over to our index here, sure enough that still works. But the question is do you want to be sharing all of the posts in your application globally like this? Probably not. Stuff like user is really handy
05:55
because you're always going to want access to the user in every single component in your application potentially so that makes sense. But for things like posts it doesn't. Another good candidate for this is let's say you are building a forum and you wanted to pass down a list of topics that a discussion could be inserted into. You might display these topics on the index page of a forum but also
06:17
have a drop down on a create post or create discussion page. So you could have a list of topics in here that come from your database that's shared globally and then you could access them at any time inside of your app. So there we go, that is shared data. It can be really useful but just be really careful about the amount of data you're passing down and sharing across every single component.
28 episodes•2 hrs 20 mins

Overview

Single-page applications are great, but they come with the challenge of maintaining two separate projects — the client and the API.

Inertia serves as the solution, seamlessly connecting these two components and enabling you to build everything in one application (a monolith) while achieving the same outcome. The best part? You won't have to create an API.

To be honest, when I first started working with Inertia, I was a little confused about how everything worked. If that sounds familiar, then this course is made for you. I'll guide you through everything you need to know to kickstart your journey in building single-page applications using Laravel, Inertia, and Vue.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.