00:05
Now with the NERSH's router and its link component,
00:07
we can specify how we want data to reload as well.
00:10
So we can limit the reload functionality of an action down to
00:13
just a specific set of keys for our controller to then return back.
00:18
So within our login page,
00:19
let's start by defining some props that we'll expect from our servers.
00:22
We can define props,
00:24
provide in an object.
00:25
First, we'll have a render count of type number,
00:28
then we'll have a refresh count one.
00:31
So we're going to have two of these,
00:32
we'll have a refresh count two,
00:34
and then we'll also have a lazy count as well.
00:37
Let's also get some of our contents off of the edge of the page by wrapping
00:41
our link component in an extra div with a class flex, flex,
00:45
call, justify, center, space, y, six, width,
00:49
full, small, width, and we'll set that to 350 pixels,
00:53
and then mx auto to center it all up.
00:56
Take that end div and plop it down at the end of our template,
00:58
and then indent everything.
01:00
Inside of that new div that we just added,
01:02
let's add a couple of buttons.
01:03
So first, we'll have a button with an at click,
01:06
which equals our router.
01:08
So we'll want to import that.
01:09
So we'll jump up to our scripts and import router from at inertiajs-v3.
01:15
Jump back down to our button now,
01:17
and we'll do router.reload to simply reload the page and all of its data.
01:21
That'll pretty much just send out another get request for
01:24
this page and then update all of its info.
01:26
The contents of this button will be render count,
01:29
and then we'll go ahead and render out that render count.
01:31
We'll have another button.
01:33
For this one, we're going to want to use the link component.
01:35
So we'll specify that the click handler should be passed down and cascaded to the child,
01:39
and then we can make use of our link,
01:41
point the href to slash login,
01:44
and the text for this one will be refresh count one.
01:47
Then we'll render out our refresh count one just like so,
01:51
and out, link, there we go.
01:53
Then we can give this button here a copy and paste it two more times.
01:57
Scroll down a little bit here.
01:58
The second one will be our refresh count two,
02:00
and we'll update the count for that there as well to 0.2 refresh count two.
02:04
Then this one is going to be our lazy count.
02:07
So we'll render out our lazy count.
02:09
Now, we're going to leave all of our links pointing to slash login so
02:11
that they pretty much just return us back to this page.
02:14
At present, all three of these links,
02:16
including our button here with router.reload are going to behave the same.
02:21
We're just going to reload our page.
02:22
We can give this a save.
02:23
Let's jump into our routes and let's pass in these props here real quick.
02:26
So I'm just going to go ahead and give this object a copy,
02:29
jump into our routes.
02:30
We added this to our login page,
02:32
so we'll jump into our login,
02:33
and we can plop that right on in.
02:35
Give it an indent, and now we need to replace our types with actual values.
02:39
So that these values can increment with each request that we send,
02:42
we're going to store them outside of our route handler inside of our routes file.
02:47
So just right up here at the top,
02:48
let's do let render count equal zero,
02:52
let refresh count one equal zero,
02:55
let refresh count two equal zero,
02:58
and then let lazy count equal zero there as well.
03:02
Then let's jump down to our actual props,
03:03
replace our types with those values.
03:05
So we do plus plus render count to increment
03:09
our render count by one and then set the render count value.
03:12
So on our initial render,
03:13
render count should be one rather than zero,
03:16
and we'll do the exact same thing here for a refresh and lazy counts as well.
03:19
So plus plus refresh count one,
03:22
plus plus refresh count two,
03:24
and then plus plus lazy count.
03:26
All right, we'll leave all of these as is,
03:28
we're not quite done with them yet,
03:29
but let's take a look and see what we have.
03:31
So we'll jump back into our browser.
03:32
Let's head over to our login page because that's where we added this in,
03:35
and just as expected, we can see all of our counts are at one because we're doing
03:38
plus plus and then calling the value passing the props.
03:41
If I click on our render count,
03:43
all of these jump to two because that's run yet again,
03:46
click on any of these other buttons,
03:47
they just all increment in the same piece.
03:50
Now it's time to make use of the superpower that the link component has that allows us
03:54
to discern what information should actually
03:56
update whenever we run through a route handler.
03:58
So we're going to leave our render count as is.
04:01
This is just going to be a simple reload.
04:02
For our refresh counts though,
04:04
we'll have these only update specific properties,
04:07
and we can specify these using the only prop.
04:09
We pass in an array with the keys that we want to include with this update.
04:14
So this will be our refresh count one because this is the prop that we're
04:19
passing in from our routes that we want to update whenever we click on this button.
04:22
So our desire here is that whenever we click the refresh count one button,
04:26
only our refresh count one actually increments,
04:29
the others remain the same.
04:30
That's our desired behavior.
04:32
Let's go and add that into our refresh count two here as well.
04:35
So refresh count two,
04:37
and inside of our view application,
04:39
our lazy count is going to be the exact same, only lazy count.
04:43
Where this one is different is inside of our controller,
04:46
but we'll leave it as is for right now just so that we can see the difference.
04:49
Again, we're not quite done with this yet,
04:51
but let's take a look and see what the behavior is inside of our browser.
04:55
Again, if we just do a simple refresh,
04:57
all increment by one,
04:58
same thing with our render count,
04:59
all are going to increment by one.
05:01
If we click our refresh count one,
05:03
you'll see that that one there only incremented or so it appears.
05:06
If I click on refresh count two now,
05:08
you'll see that that jumped straight from seven up to nine.
05:11
So although that property was not included with the updated information,
05:16
it was still updated whenever we clicked on our refresh count one.
05:19
For example, if we click our refresh count one again,
05:22
it incremented whenever we clicked on our refresh count two.
05:25
So rather than going to nine and incrementing by one,
05:28
it's already at nine,
05:29
it just hasn't updated on our client.
05:31
So whenever we click on this again,
05:33
it's going to jump straight to 10 as you see there.
05:35
The reason for this is because inside of our routes file,
05:39
all of these increments are still executed
05:42
whenever we call our login route handler,
05:44
and that's just native JavaScript execution.
05:47
We're passing in an object,
05:48
so all of these properties are going to be evaluated.
05:52
Hence, each one is going to increment by one
05:54
regardless of what we specify on
05:56
our client as the only prop that we want to update.
05:59
Inertia is though however,
06:01
plucking out all of the extras and just passing
06:03
in a refresh count one or refresh count two via the only.
06:06
So if we jump back into their browser,
06:08
right-click this, inspect, jump into our console,
06:11
and let's click on our refresh count two again,
06:13
you'll see that jump from nine now to 11.
06:14
Let's take a look at the response for this.
06:17
So you see for the props,
06:18
we only get back that refresh count two.
06:20
So it is omitting all of them there on our returned prop data,
06:24
but it is still running and executing on our server.
06:27
If we didn't want it to run and execute on our server,
06:29
we could instead of passing these values indirectly,
06:32
wrap them in a callback function.
06:35
This will allow Inertia to defer its execution via the render method,
06:40
and now our increments will only be evaluated
06:43
whenever we specifically want to update these props.
06:46
So let's go ahead and give that a save.
06:48
We'll leave our lazy again as is for right now.
06:50
Jump back into our browser.
06:52
We saw everything just do a nice refresh there because we
06:54
updated our route file holding our increment values.
06:58
So we're all back to one.
06:59
I'm going to go ahead and collapse that down slightly.
07:01
Same behavior if we click on our render count,
07:03
everything's just going to increment by one
07:04
because we're including the entire set of our data.
07:07
However, this time whenever we click on our refresh count one,
07:10
you'll see that only our refresh count one incremented,
07:12
which on the client side is the same behavior that we saw before.
07:15
But now if we click on our refresh count two,
07:18
instead of jumping from two to four,
07:20
it now has not incremented yet on our server.
07:23
So instead, it will jump from two to three
07:26
because its value is now wrapped in that callback function.
07:29
So it's not automatically going to be evaluated whenever that code runs.
07:33
Awesome. So now we have our refresh counts as expected,
07:36
and these increments are only going to actually
07:38
increment whenever we make a call specifically for them.
07:41
Lastly, what about this lazy count right there?
07:43
Well, at present, it's going to behave the same as the others,
07:46
but we haven't wrapped it yet inside of that callback function.
07:49
So it has been incrementing this whole time.
07:51
So let's go ahead and jump back into our route definitions here.
07:54
Whenever we're taking a look at our CTX inertia,
07:57
so CTX inertia,
07:59
one of the items that we have available is this lazy method.
08:02
This allows us to lazily resolve
08:04
values only when they're specifically requested.
08:07
So if we add in this lazy here,
08:10
provide in a callback,
08:11
and then we'll end that lazy call right there.
08:14
Our lazy count will only ever increment by executing this callback
08:18
whenever we specifically specify that we want to update and include our lazy count.
08:23
So if we give this a save here,
08:24
all of our numbers just refresh back to zero because our server restarted our route file.
08:28
Jump back into our browser,
08:30
we can see it do a nice refresh there.
08:31
Everything's reset. You'll see that a value for our lazy count has been omitted altogether.
08:36
It wasn't even included with the initial render because it wasn't specifically requested.
08:40
As we click on these other buttons,
08:42
they're all going to increment by one.
08:44
You see our render count increments everything except for our lazy count,
08:47
because yet again, it has not been requested.
08:49
But if we click on our lazy count,
08:51
now it's going to increment because we are specifically requesting it.
08:54
So that's a cool feature that you can add in if there's
08:57
some minute information that you only need to include in very specific circumstances.
09:02
You can just wrap it in that lazy call,
09:04
and now anytime that you specifically request it,
09:06
it will be included, otherwise,
09:08
it'll be omitted altogether, which is pretty cool.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!