00:09
render method is passed directly into the props of our page component. But what about information that we need to pass globally or in middleware and things like that?
00:18
Well, in the last lesson, whenever we were taking a look at the CTX inertia property, we saw that there was a share method inside of here.
00:24
And just like with EdgeJS, this allows us to add an object with a key value pair of any information that we want to share into our actual pages.
00:32
So we could say shared from routes through for that, and now shared from route will be shared along with our page render and via our props.
00:40
So with the share now in place, we could add that into our defined props paired from route. The type of that is Boolean. We can plop in another comma and add our shared from route into our render as well.
00:50
Take a look at that real quick in our browser. And sure enough, there's the true from that right there. You can also see that directly in the props of the view dev tools right down here. All right, let's hide that back away.
01:00
Now there are use cases where you'll want to reach for that inside of your route and instances where maybe you need to conditionally add data into your page before you actually get down to your render call.
01:09
But for the most part, this is going to be really useful inside of middleware. So if we jump back into our terminal, give this a stop, clear it out, node, base, make middleware. And we'll call this share example.
01:19
We'll add this as a router middleware so that it runs with any route that's matched against for a request. And there we go. It's now added our middleware and added it to the kernel.
01:28
So we can jump back to our file explorer, go up to app middleware, and there is our share example middleware. We'll go ahead and click on that to open it up in the right hand panel that we have in here in our text editor.
01:38
And you'll see that we also have access to our HTTP context right here. So we can do CTX inertia share, just as we had done in our route handler.
01:46
So we can do shared from middleware and say maybe from middleware for this one so that we can tell the difference.
01:52
I'm going to go ahead and plop this down onto new lines and we can add in shared from middleware. And this one is of type string. So let's add ourselves another comma shared from middleware.
02:02
Give it a save. Let's open up our browser and take a look at what we got. Give it a refresh. All right. We stopped our server. Jump back into the terminal. Let's boot that up. npm run dev. Okay, there we go.
02:12
Let's give that a refresh now. And there we go. So now we got here, true, which is shared from our route handler and then from middleware, which is shared from our middleware. Awesome. So, so far, so good. Let's hide that back away.
02:21
Now, what if we want to share data globally, but we don't want to have a middleware specifically to do so? Well, if we open our Explorer back up here, go down to config, we have an inertia config
02:31
right here. Let's open that up and take a look at it. Hide the Explorer back away. And you're going to notice a couple of things. First and foremost, we have a root view right there.
02:38
The value of this root view is the EdgeJS page that's used to actually render out the mounting element for our view application or whatever front end it is that you're using.
02:48
So if you were to want to change the name of that at all, this is where you could do so. Then jumping down to the bottom, we have an SSR section. This just flags whether or not SSR is enabled.
02:57
And it also points to the entry point script specifically for SSR. In between those two, we have shared data.
03:04
This is information that we can share globally across all pages with inertia.js directly into our view application. You'll see that we already have a value here for errors.
03:12
The value of this is coming straight from our session flash messages with the key of errors. So this is literally just our validation errors.
03:20
If we were to have a validation runs into an error, the flash messages that we get back for those errors are directly inside of there.
03:26
So we're sharing those globally inside of a key called errors within our view application. Within the shared data object, we can either provide direct values or we can use a callback
03:34
function to get access to the HTTP context to do per request sharing if need be. So here the flash messages are being shared specifically for one individual request.
03:44
It's not being shared for everybody. It's specific to the HTTP context of this request. If, however, we had a set value that we wanted to share with everybody, we could just add
03:52
that in as a simple key value pair without a callback function. So shared globally from config, like so. Add that now into our page props.
04:01
So shared globally. That too is a string. We can add that into our render as well. Shared globally. Let's check out our page once more. It's going to refresh. And there we go.
04:11
So now we have true coming from the share inside of our route handler, from middleware coming from our middleware share. And then from config coming from our global configuration share.
04:20
Since errors is null, that's being omitted altogether. Otherwise we would take a look at that. We'll take a look at that later on whenever we get the validations. But if we take a look at our props, you can see it's not in there, but all of our other
04:30
data is. Now there are types for this. With view, those are a little hindered. But down at the bottom of our configuration, you'll see that we have this shared props type.
04:39
The default value from this is going to be inferred from our initial config specifically for the shared data. So anything that you add to your shared data will be inferred and automatically added to
04:49
the shared props type. And this type is available within the AdonisJS inertia types namespace. Now you might be thinking, okay, cool.
04:56
So I can just do something like an shared props, import that. Imports all wrong there. Let's fix that real quick.
05:03
Import type shared props from at AdonisJS inertia types like so.
05:10
However, with view, the key and the type needs to be explicitly defined within the object of the defined props for it to be picked up.
05:18
Unfortunately, that means that the shared props here isn't going to expand in and automatically include all of our shared data. To my knowledge, this explicitly just hinders Vue.js.
05:27
If you're using React, Svelte, and the like, you'll be able to just use shared props like we are here. So for example, if I give this a save and we get rid of our shared globally, and we
05:35
do const props equals, and we take a look at what actually comes back here. So props dot, you can see that we still have shared globally because that's actually inside of the shared props type.
05:44
However, if we were to actually try and render this out, take a look at our browser and take a look specifically at our registered page props, you'll see first and foremost, inside
05:52
of the actual render, we don't have that global share right up here. But furthermore, if we take a look at the actual stateful information that we have,
05:59
our props contains all of our other shares, except for our global one that's hindered down here in our attributes. This is noted on the AdonisJS documentation.
06:07
So with Vue, if you do need to use your shared props, you'll want to explicitly add that into the type of the defined props like we were doing before, and it will work a-okay.
06:17
Alternatively, you can also access the props from the page using the InertiaJS usePage composable. So we could make use of that.
06:25
So const page equals usePage and import that from InertiaJS Vue 3. And then we'll type in this with our shared props, like so. Oops, got a double import there.
06:35
Let's get rid of one. There we go. If we do page dot, you'll see that we have access to our component, props, remember states, scroll regions, URL inversions.
06:43
If you're paying attention, you'll notice that that schema looks relatively similar to the Inertia page initial page data. And that's because that's exactly what it is.
06:51
The only difference is instead of being the initial page, whenever we call usePage here, this is our live page data that's updated and kept in sync with our page for the specific
07:00
request that we're on. So we could do page dot, get access to our props via props. And there you'll see that now we have shared globally.
07:08
So we could do shared globally there and get access to it as well. And this works as well if we were to try and render that out. So if we drop our page props, shared globally, just like so, get rid of it and set up our
07:18
props all together. You'll see that we get back the exact same thing if we jump back to our browser, where from config renders out a OK. All right. So we now know how we can share some stuff globally within Inertia as well.
07:28
We haven't really put it into much practice, we've just kind of tested around and played with it. And further on down the road, we'll actually put this into practice and use some information globally as well.