The Flow of Pages and Page Props

In This Lesson

We'll talk about the flow InertiaJS follows when rendering pages, from AdonisJS to our Vue application. Then, we'll talk about passing props to our Vue page components.

Created by: @tomgobich
Published: 1 year ago

⏳ Chapters

00:00 - The Flow of Rendering a Page
03:18 - Adding A Second Page
05:30 - Passing Prop Data
06:37 - Initial Page

Join the Discussion 0 comments

Be the first to comment!

Transcript

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

Building with AdonisJS & Inertia

91 Lessons

14h 5m

Getting Started

The Basics

Working with Forms

Database & Project Scaffolding

Authentication & Onboarding

The User's Organizations

Difficulties, Statuses, & Access Levels

Courses

Modules & Lessons

Settings

Organization Members

Authorization

InertiaJS 2

Stop losing your best ideas!

Use our integrated note feature to capture and organize your key insights. Take a note at any timestamp and jump instantly back to that moment in the video with a single click.