00:05
Our first goal of understanding here is how do we go about requesting
00:08
our home URL and getting back the actual page from view using Inertia.
00:13
So let's hide our browser back away and let's
00:14
start by jumping inside of our routes directory.
00:16
So Command-P and let's search for routes and hit Enter there.
00:20
So we can see that we are registering a route on slash.
00:24
So any request that goes to slash as this on method is
00:27
a brisk route is going to render an inertia page,
00:31
specifically looking for our home directory,
00:33
and it's going to pass it a prop object with version six as the value.
00:38
The first argument that we provide here is the page that we
00:40
want to actually render out from our pages directory.
00:43
So by providing this page to the inertia render method,
00:46
it's going to be passed into our application.
00:48
So if we dive into our application directory and take a look at our app.ts,
00:52
the name being provided here is
00:54
the actual name that we're providing inside of the route.
00:56
So we're going to get home inside of
00:59
our app.ts for the name that we're trying to resolve here.
01:01
It's then this method's job to find and resolve
01:04
that component returning it back as the response of this method.
01:07
This exists inside of our SSRTS as well.
01:10
You can see we have that same resolve function.
01:12
So we pass the name into the render method for inertia.
01:15
Inertia then uses our resolve function to
01:17
actually resolve that component from our pages.
01:19
Then this is then used and wrapped with
01:22
Inertia's bindings to provide in
01:24
the initial state data that we are passing as props directly from the render call,
01:29
which then come through inside of our component itself,
01:31
where we can define the props and get access to it,
01:34
so that we can render it out or do whatever we need to with that prop data.
01:38
So here you can see it's directly inside of our title,
01:41
AdonisJS, and then it's plopping that version of
01:43
six times inertia times view.js.
01:46
So if we open our browser back up,
01:48
you can see that prop directly right here where we see that six.
01:51
So this is coming through all the way from the AdonisJS render method or inertia,
01:56
and being passed all the way through to the props of
01:58
our page where we are then rendering it out.
02:00
Furthermore, if you have the view dev tools installed inside of your browser,
02:03
you can take a look at that directly inside of that dev tools panel.
02:06
So here we see the root of our application,
02:09
and then we have an inertia component which takes in the initial props and
02:12
component binds that all together to render out our application,
02:16
and passes that information into the page,
02:19
where we can then readily make use of all of that data.
02:21
So inside of our page of home,
02:23
you can see that we're getting back the props with version six.
02:26
If we take a look at the inertia component,
02:28
we can see that that's also coming into the initial page data via props,
02:32
version six right there.
02:34
So it's really this inertia component that's the glue on the front-end side,
02:37
that's allowing us to pass data from AdonisJS into our view application.
02:42
Now, the initial data that inertia is using via this component right here is actually
02:46
being provided via AdonisJS directly on the mounting element.
02:50
So if we take a look at the inspect panel,
02:52
here's our mounting element with the idea of app.
02:54
If you take a look at the data page,
02:56
this is specifying what component it is that we want to use,
02:58
the version, as well as the prop information and the URL that we are at.
03:02
The inertia component is then reading this data page attribute as an object,
03:07
parsing it, and determining this stateful information
03:10
that's then being passed into our home component.
03:13
So that's really the flow of what's going on there,
03:15
whenever we're rendering things out.
03:16
If we hide our browser back away,
03:18
let's take a look at this inside of a non-brisk route.
03:21
So if we don't use the shorthand syntax here,
03:23
and instead we do router.get,
03:25
and let's add a route for say register.
03:28
We have an async handler that takes in our CTX or HTTP context,
03:32
and directly on the HTTP context,
03:34
we now have an inertia property.
03:36
This inertia property contains several things.
03:38
We can add lazy data,
03:40
we can specify an external location to redirect to,
03:42
render a specific component page,
03:44
which is the same as this render inertia method for the shorthand brisk routes.
03:48
Then we can also share data just the same as we could with EdgeJS to our view app.
03:53
So what we're looking to do is render out a new page.
03:56
So we'll do render here,
03:57
and we'll put our page inside of an auth folder and call it register.
04:01
If we wanted to, we could just the same as the brisk render inertia method,
04:05
we could also pass in page props via the second argument.
04:08
You might also see that we have a view props option.
04:10
Page props are passed directly into our view application,
04:13
or whatever front-end client you are using.
04:16
View props are passed into the EdgeJS page that ultimately
04:19
renders out the mounting element for our client application.
04:23
So view props are used directly inside of the resources,
04:26
inertia layout, or whatever layout it is that you're using for your application.
04:30
So any view props that we provide are accessible inside of this file,
04:33
whereas page props are accessible inside of our page components.
04:37
So that's the difference between those two.
04:40
Now, before we give this a test run,
04:41
we also want to return that rendered result back,
04:44
and then we'll give that a save,
04:45
jump inside of our pages directory, right-click it, new file.
04:49
Let's create an auth directory and a register.vue file inside of there.
04:53
But right now, we can just specify a template with an h1 of register here.
04:58
We'll give that a save, jump back inside of our browser,
05:00
and replace our URL with /register to request that route,
05:04
where we now see our register component
05:07
rendering out our register text right there.
05:09
Furthermore, since our app has been reinstantiated,
05:11
we need to close out our DevTools and open it back up to reload it,
05:14
where we can now see our register component is being used as our page.
05:18
We don't have any stateful information being used,
05:20
so the stateful information for the component is completely empty.
05:23
But if we take a look at inertia,
05:24
it still has all of our initial page information.
05:27
If we were to jump back inside of our text editor,
05:29
provide some stuff as our props,
05:32
give that a save, jump back into our browser,
05:34
see that it did a refresh,
05:35
our inertia component now has props with stuff here inside of it,
05:39
that are then passed inside of our register component.
05:41
Since we don't have it defined as a prop,
05:43
it's being added to our attributes.
05:45
Let's jump back into our text editor,
05:47
jump inside of our register view,
05:48
where we can now add a setup script
05:51
and specify that we want to use the language of TypeScript.
05:53
Then we can use the view global define props to define our prop data.
05:57
When using TypeScript, you can use the define props and give it a specific type,
06:01
and it will automatically register that back to the props.
06:04
So we can provide an object in here with stuff of type screen,
06:08
to register the prop data,
06:10
and we can then plot that directly inside of our template,
06:13
because stuff will now be registered as a prop inside of our actual register page.
06:17
So if we jump back into our browser,
06:18
you can see it already refreshed and our component has been reinitialized,
06:22
so we need to restart our DevTools once more,
06:24
inspect, jump back into there,
06:26
where we now see register with props,
06:28
not attributes anymore, but props of the stuff here.
06:31
Furthermore, if we take a look back at our mounting element,
06:34
you can see that this is updated as well,
06:35
where props is stuff here.
06:38
Now, an important distinction to make is that the mounting element is only ever
06:41
going to contain the initial data from the initial load.
06:45
The same is true with the initial data inside of the inertia component.
06:48
So initial page data right here,
06:50
this will not change on subsequent requests,
06:52
and we'll take a look at how that's updated later on.
Join The Discussion! (0 Comments)
Please sign in or sign up for free to join in on the dicussion.
Be the first to Comment!