Learn Inertia
This episode is for members only

Sign up to access "Learn Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
15. A recap, and Inertia links

Episodes

0%
Your progress
  • Total: 2h 20m
  • Played: 0m
  • Remaining: 2h 20m
Join or sign in to track your progress

Transcript

00:00
So far, we've built out a single page, and now we're going to create a user's profile page
00:05
and then look at the concept of links within Inertia, because we certainly don't want to use a standard anchor within our HTML to link to different pages in our app. What this episode will also do is just
00:17
going to reiterate everything we've already done, and we're going to build up a new page from scratch, pass some data down. So it'll give us a good opportunity
00:24
to just revisit what we've already done. So to start with, we're going to create out a controller, which will show this user. So let's say user show controller,
00:36
and let's go ahead and register our route for this as we normally would. Let's just copy one of these down. We're going to go ahead and make a GET request to users,
00:44
slash, and then we'll just use route model binding, which again, is going to work in exactly the same way in a normal Aravel app as it is with Inertia, and we'll reference that user show controller,
00:56
and we'll call that users.show. Okay, let's head over to this controller. We'll go ahead and create out an invoke method. Let's return Inertia render,
01:07
and we haven't created this page out yet, but we can kind of guess where it's going to go, maybe in a user's directory, and it'll be show.view. So let's create this page out,
01:15
and we can do that over here, users and show.view. Okay, so let's create a template out with user first of all, and let's head over to this page to see what it looks like. User slash one, and there we go.
01:30
So again, very easy to create new pages. So let's bring our script section into here, and let's pass down the actual user so we can output their name on the page somewhere.
01:43
Over in the user show controller, we're going to get a request in, which we probably won't need, but we are of course going to get the user
01:51
into this via route model binding. So if we just die dump on that user, and we give that a refresh, there we go. That's my user.
02:00
Okay, so we want to pass this down. We can do that in exactly the same way using a resource. So the user that we're passing down is going to be a user resource,
02:10
so we can take advantage of that structured data. We're going to make this passing the user in. Now over in show, remember we're going to define out our props in here,
02:21
and we're going to define the user in here, which is going to be an object. So now if we dump that user out on the page, sure enough, we see that data,
02:31
and we can just use that in any way we need in our template. So we'll go ahead and take over the dashboard here like we did before. So let's copy that over to here and just tidy this up.
02:43
We can get rid of the script section at the top just here. Actually, no, we can't. So let's pull in the authenticated layout and the head component,
02:52
which we've looked at into script setup just here. And at the top here, let's change the title. Now, one thing we didn't talk about when we looked at the head component
03:01
is because these are props, they can just be bound in in the same way they can with any other data in props in view. So I can just output the user's name in here,
03:11
binding it in because it's not a string literal. And if we head over, sure enough, that is now in the title. So very easy to take any dynamic data and just use it within this component or anywhere else.
03:25
So for the header here, we can do the same thing, user name, and of course, that's gonna update. And let's go down and just make this a little bit smaller again.
03:33
And then down here, we're gonna iterate through a list of the user's posts. So we can do this in pretty much any way we want to, as long as we're using that resource
03:42
that we created earlier to structure that data, it doesn't really matter. So one way of doing this, we could say posts, post resource,
03:51
and then create a collection out for that because we're gonna assume that we have many. And we could say user and posts like so, and that would give us a list of our posts.
04:02
Again, over in show, we're gonna go down to our script section. We're gonna say that posts is an array, and let's just dump these out on the page
04:11
somewhere very quickly, just so we can see that data in there before we start to do anything with it. And there we go.
04:18
There are all of the posts that I have created. The other option is to manually make a request to this, and there's good reason why you might need to do this. So by that, I mean, make a request directly
04:32
through the post query builder or the query builder in the context of a post and say something like where belongs to user, and then say get.
04:42
Now, the reason you might want to do this is if you want to pull in pagination because it's a lot easier to paginate something that you're building up via query builder
04:52
than it is via a relationship where you just get a collection back. Now, there's a course over on CoCourse where we look at how to implement pagination.
05:01
So if you want to go ahead and do that, feel free to go ahead and follow that as well once you've got the hang of Inertia. But for now, let's just pass through user posts
05:10
because we're not paginating this data at the moment. Okay, so now that we've got these two bits of data, we can just go ahead and start to iterate through these. So again, we'll do the same thing on here.
05:20
So we'll say maybe let's just, yeah, we'll just do this directly on here for now. V4 post in posts, and we'll go ahead and key this by the post ID,
05:33
and we will stick, well, we'll pretty much just grab what we have over on our index page. We could create another component out for this within view.
05:41
So let's go and just grab. In fact, we can pretty much just grab all of this. So let's just do that. Over in here, put that in there,
05:51
and that should just work. Now, the only issue here is we've got an error. Let's just take a look, and we can't read name. So we need to be careful here
05:58
because remember over on the post resource, we use when loaded. So we need to make sure that we load that data in before we do anything.
06:07
So over on the user show controller, we can just say user load, and then posts.user, like so. So that will load the user in within them posts,
06:19
and that should work. Great. Okay, let's space these out, and then we'll talk about links,
06:23
which is what we are here for. So let's do a space Y of three, and there we go. Okay, so our goal now, if we head back over to our comments page,
06:33
is to link through when we click on any of these usernames to that page for that specific user. Then we're gonna refactor this later when we look at Ziggy,
06:42
which is gonna allow us to use named routes within our client side. So we're gonna head over to index, and let's come down to where the user's name is just here,
06:53
and let's go and link this through. So what we're not gonna do is create our own anchor. Let's just see what happens when we create a standard anchor here,
07:03
and link it through to where we need it to go through to. So we'll bind in the href here. We'll do two back ticks, we'll do forward slash users, and then of course, we can just put in the post user ID,
07:16
because we're just passing through the ID and the URL. So let's see what happens now when we click on one of these. Okay, so it goes through,
07:25
but what's actually happened here is we have performed a full page reload. We can prove that by opening up our network tab, and if we go back,
07:33
what we'd expect to see is an XHR request going through. So Inertia reloads that data and passes it down to the new page component. But what's happening here
07:43
is it's just making an entirely new request. That's not what we want, because we're technically building out a single page application here,
07:50
and there might be instances where you do need to use this, but the majority of the time, you're not gonna need to. So instead, we're gonna put in another component from Inertia, if we head up to the top here,
08:03
and that is link. So now if we head down to where we were using that anchor, we're gonna swap this component over entirely with a link component.
08:14
So it works in exactly the same way. In fact, link is just a wrapper around an anchor, so it will still be rendered as an anchor. We can still bind the hrefin in exactly the same way,
08:25
but what this is now gonna do is it's actually gonna make a request through to our API, reload the new page, and pull in the new data. And again, we can keep our network tab open
08:36
to see how that works. So let's click on my username here. We're forwarded over much like before, but this time, all we've done is made a request
08:45
through to this specific component to render it, and we are accessing those specific props. This is from the new controller that we've just created to render out the content that we need on the page,
08:59
both the user and the user's posts. So there are a ton more things that we can do with this link component within Inertia. The majority of the time,
09:07
you're just gonna be linking through like we have here, but let's take a look in the next episode at a couple of things that we can use within link that massively differ from a normal anchor.

Episode summary

In this episode, we start off by recapping what we've already done with our Inertia.js + Laravel setup, then we dive right into building a user's profile page from scratch. It's a nice way to reinforce how we create new pages, set up controllers, routes, and render Inertia components—just like we've done before—but this time for individual users.

Once the profile page is up, we work on passing down a user's data and their posts into our Vue component using resources. We cover a couple of ways to load posts, including doing it directly through relationships and why you might want to use a custom query if you need features like pagination.

With the user's data and their posts on the profile page, we tidy up the Vue component by using the layout, props, and even dynamically update the page title with the user's name.

Finally, we shift focus to navigation between pages. We talk about why you shouldn't use standard anchor tags (<a>) in Inertia apps—clicking them causes a full page reload, which isn't the SPA vibe we want. Instead, we introduce the Inertia Link component, which helps us make client-side transitions between pages (like clicking a username to see their profile) without ever leaving the SPA context. You even get to see the difference in the browser's network panel!

In the next episode, we'll continue exploring more advanced Inertia link features, but for now, you've got the basics of smooth, SPA-styled page linking down.

Episode discussion

No comments, yet. Be the first!