00:02
Okay, so we now know whatever information we pass
00:07
into the prop argument of our inertia render method
00:10
is passed directly into the props of our page component.
00:14
But what about information that we need to pass globally
00:16
or in middleware and things like that?
00:18
Well, in the last lesson, whenever we were taking a look
00:20
at the CTX inertia property,
00:22
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
00:27
with a key value pair of any information
00:29
that we want to share into our actual pages.
00:32
So we could say shared from routes through for that,
00:35
and now shared from route will be shared
00:37
along with our page render and via our props.
00:40
So with the share now in place,
00:42
we could add that into our defined props paired from route.
00:45
The type of that is Boolean.
00:46
We can plop in another comma
00:48
and add our shared from route into our render as well.
00:51
Take a look at that real quick in our browser.
00:52
And sure enough, there's the true from that right there.
00:55
Can also see that directly in the props
00:57
of the view def tools right down here.
00:59
All right, let's hide that back away.
01:01
Now there are use cases where you'll want to reach
01:02
for that inside of your route
01:04
and instances where maybe you need to conditionally add data
01:06
into your page before you actually get down
01:08
to your render call.
01:09
But for the most part,
01:09
this is gonna be really useful inside of middleware.
01:12
So if we jump back into our terminal,
01:13
give this a stop, clear it out, node is make middleware.
01:17
And we'll call this share example.
01:19
We'll add this as a router middleware
01:21
so that it runs with any route
01:23
that's matched against for a request.
01:25
And there we go.
01:26
Let's now edit our middleware and edit it to the kernel.
01:28
So we can jump back to our file explorer,
01:30
go up to app middleware,
01:32
and there is our share example middleware.
01:34
We'll go ahead and click on that to open it up
01:35
in the right hand panel that we have in here
01:37
in our text editor.
01:38
And you'll see that we also have access
01:39
to our HTTP context right here.
01:41
So we can do CTX inertia share,
01:44
just as we had done in our route handler.
01:46
So we can do shared from middleware
01:48
and say maybe from middleware for this one
01:50
so that we can tell the difference.
01:52
I'm gonna go ahead and plop this down onto the lines
01:55
and we can add in shared from middleware.
01:58
And this one is of type string.
02:00
So let's add ourselves another comma,
02:02
shared from middleware, give it a save.
02:04
Let's open up our browser and take a look at what we got.
02:06
Give it a refresh.
02:07
All right, we stopped our server.
02:08
Jump back into the terminal.
02:09
Let's boot that up, npm run dev.
02:11
Okay, there we go.
02:11
Let's give that a refresh now.
02:12
And there we go.
02:13
So now we got here, true,
02:14
which is shared from our route handler
02:16
and then from middleware,
02:17
which is shared from our middleware.
02:19
Awesome. So, so far, so good.
02:20
Let's hide that back away.
02:21
Now, what if we wanna share data globally,
02:23
but we don't wanna have a middleware specifically to do so?
02:26
Well, if we open our Explorer back up here,
02:28
go down to config, we have an inertia config right here.
02:32
Let's open that up and take a look at it.
02:33
Hide the Explorer back away.
02:34
And you're gonna notice a couple of things.
02:36
First and foremost, we have a root view right there.
02:38
The value of this root view is the EdgeJS page
02:41
that's used to actually render out the mounting element
02:44
for our view application
02:46
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,
02:50
this is where you could do so.
02:51
Then jumping down to the bottom,
02:53
we have an SSR section.
02:54
This just flags whether or not SSR is enabled.
02:57
And it also points to the entry point script
03:00
specifically for SSR.
03:01
In between those two, we have shared data.
03:04
This is information that we can share globally
03:06
across all pages within our EdgeJS
03:08
directly into our view application.
03:10
You'll see that we already have a value here for errors.
03:12
The value of this is coming straight from our session,
03:15
flash messages with the key of errors.
03:17
So this is literally just our validation errors.
03:20
If we were to have a validation, runs into an error,
03:23
the flash messages that we get back for those errors
03:25
are directly inside of there.
03:26
So we're sharing those globally
03:27
inside of a key called errors within our view application.
03:30
Within the shared data object,
03:32
we can either provide direct values
03:33
or we can use a callback function
03:35
to get access to the HTTP context
03:37
to do per request sharing if need be.
03:40
So here the flash messages are being shared
03:42
specifically for one individual request.
03:44
It's not being shared for everybody.
03:45
It's specific to the HTTP context of this request.
03:49
If however, we had a set value
03:50
that we wanted to share with everybody,
03:52
we could just add that in as a simple key value pair
03:54
without a callback function.
03:56
So shared globally from config, like so.
03:59
Add that now into our page props.
04:01
So shared globally, that too is a string.
04:04
We can add that into our render as well.
04:07
Shared globally.
04:08
Let's check out our page once more.
04:10
It's gonna refresh and there we go.
04:11
So now we have true coming from the share
04:13
inside of our route handler,
04:14
from middleware coming from our middleware share,
04:17
and then from config
04:18
coming from our global configuration share.
04:20
Since errors is null, that's being omitted altogether.
04:23
Otherwise we would take a look at that.
04:25
We'll take a look at that later on
04:26
whenever we get the validations.
04:27
But if we take a look at our props,
04:29
you can see it's not in there,
04:30
but all of our other data is.
04:31
Now there are types for this.
04:33
With view, those are a little hindered,
04:35
but down at the bottom of our configuration,
04:37
you'll see that we have this shared props type.
04:40
The default value from this is gonna be inferred
04:41
from our initial config,
04:43
specifically for the shared data.
04:45
So anything that you add to your shared data
04:47
will be inferred and automatically added
04:49
to the shared props type.
04:50
And this type is available
04:51
within the AdonisJS inertia types namespace.
04:54
Now you might be thinking, okay, cool.
04:56
So I can just do something like an shared props,
04:59
import that, import's all wrong there.
05:02
Let's fix that real quick.
05:03
Import type shared props from at AdonisJS inertia types,
05:08
like so.
05:10
However, with view, the key and the type
05:13
needs to be explicitly defined
05:14
within the object of the defined props
05:17
for it to be picked up.
05:18
Unfortunately, that means that the shared props here
05:20
isn't going to expand in and automatically include
05:23
all of our shared data.
05:24
To my knowledge, this explicitly just hinders Vue.js.
05:27
If you're using React, Svelte, and the like,
05:29
you'll be able to just use shared props like we are here.
05:31
So for example, if I give this a save
05:33
and we get rid of our shared globally
05:35
and we do const props equals,
05:37
and we take a look at what actually comes back here.
05:39
So props dot, you can see that we still have shared globally
05:42
because that's actually inside of the shared props type.
05:44
However, if we were to actually try and render this out,
05:47
take a look at our browser
05:48
and take a look specifically at our registered page props,
05:51
you'll see first and foremost, inside of the actual render,
05:53
we don't have that global share right up here.
05:55
But furthermore, if we take a look
05:57
at the actual stateful information that we have,
05:59
our props contains all of our other shares
06:01
except for our global one
06:03
that's hindered down here in our attributes.
06:05
This is noted on the AdonisJS documentation.
06:08
So with Vue, if you do need to use your shared props,
06:10
you'll want to explicitly add that
06:12
into the type of the defined props
06:14
like we were doing before, and it will work a-okay.
06:17
Alternatively, you can also access the props from the page
06:21
using the InertiaJS use page composable.
06:23
So we could make use of that.
06:25
So const page equals use page
06:28
and import that from InertiaJS Vue 3.
06:30
And then we'll type in this with our shared props like so.
06:34
Oop, got a double import there.
06:35
Let's get rid of one.
06:36
There we go.
06:37
Now, if we do page dot,
06:38
you'll see that we have access to our component props,
06:41
remember state, scroll regions, URL, and versions.
06:43
If you're paying attention,
06:44
you'll notice that that schema looks relatively similar
06:46
to the Inertia page initial page data.
06:49
And that's because that's exactly what it is.
06:51
The only difference is instead of being the initial page,
06:54
whenever we call use page here,
06:56
this is our live page data that's updated
06:58
and kept in sync with our page
07:00
for the specific request that we're on.
07:02
So we could do page dot,
07:04
get access to our props via props.
07:05
And there you'll see that now we have shared globally.
07:08
So we could do shared globally there
07:10
and get access to it as well.
07:11
And this works as well
07:12
if we were to try and render that out.
07:14
So if we drop our page props shared globally,
07:16
just like so,
07:17
get rid of it inside of our props altogether,
07:19
you'll see that we get back the exact same thing
07:21
if we jump back into our browser,
07:22
where from config renders out a okay.
07:24
All right, so we now know how we can share some stuff
07:27
globally within Inertia as well.
07:28
We haven't really put it into much practice.
07:30
We've just kind of tested around and played with it,
07:32
but further on down the road,
07:33
we'll actually put this into practice
07:35
and use some information globally as well.
Join The Discussion! (4 Comments)
Please sign in or sign up for free to join in on the dicussion.
thenial
I believe it should be noted that errors: (ctx) => ctx.session.flashMessages.get('errors') does not contain inputErrorsBag or errorsBag. So if you're using session authentication and run into an E_INVALID_CREDENTIALS exception, the errors in sharedData will not have that.
Also, I believe the useForm() hook from inertia uses the errors from sharedData, and if you're using that then it too will not get the inputErrorsBag or errorsBag.
Please sign in or sign up for free to reply
tomgobich
Hi Thenial! That is correct,
errorsBagwon't be included when you specifically geterrors. I opted to save this discussion for a later lesson, but the way I like to think of it is:errorsholds your validation errorserrorsBagholds your exceptionsThe
useFormhelper is really only going to be concerned with validation errors, as it works best when they have a field key, and exceptions tend to be more generic and not specific to any one field. Later in this series, we'll watch for theE_INVALID_CREDENTIALSexception using an alert component. We'll also set up aToastManagerto automatically display a toast notification anytime an exception is reached. When we have validation errors, we'll also get anerrorsBagentry with a summary of those validation errors, so a nice bonus of this approach is we'll also get a little toast when we have validation errors saying something like: "The form could not be saved. Please check the errors below."Additionally, the
inputErrorsBagis, at this point, going to mostly be the same aserrors. See:https://github.com/adonisjs/session/blob/develop/src/session.ts#L360-L370
Please sign in or sign up for free to reply
thenial
Thanks for the response! the differentiation you pointed out for errors and errorsBags helped me clarify my understanding of them and I look forward to the lectures that cover this topic!
Please sign in or sign up for free to reply
tomgobich
Anytime!! Awesome, I'm happy to hear that! 😊 Should be discussed in the following two lessons:
4.8 - Setting Up A ToastManager
5.3 - Logging In Users & Displaying Exceptions
*lesson numbers subject to change slightly
Please sign in or sign up for free to reply