This episode is for members only
Sign up to access "Installing Inertia from Scratch" right now.
Get started
Already a member? Sign in to continue
Playing
14. Showing posts using API resources
Episodes
01. Inertia from scratch
02. Enhancements
03. Server-side rendering (SSR)
Transcript
00:00
Back over to the post index controller, we're now going to send down all of the posts that we have in our database so we can display them in a list. At the moment, there is just two in here. Let's just change over some of the content here and also go ahead and post a couple more as well.
00:15
So this is a comment. And hey, there, let's just do them for and that should be good. OK, so we know that we can pass props down to our components via our controller. So the first instinct might be just to say post, maybe say latest and then get.
00:35
So we scope that by the latest. So the latest are at the top. Now that's going to work. We can head over to our post index component and down here say define props.
00:47
Go ahead and grab our posts out and that's going to be an array of data. So let's go just underneath our form here and we'll wrap this in a div and let's output a list of our posts. So. Let's just dump them out here and have a look.
01:05
OK, so sure enough, we have an array with all of these objects inside. However, what's happening is Laravel is using by sending this down its default functionality to transform this into JSON, which includes created app in a way that we probably don't want to use, plus any other data that we might not want to see. We might not want updated app in here.
01:31
We probably do want the ID, but you might have a user ID column in here and you don't really want to see that. What we want really is full control over how this data is passed down and used in our template or just basically how it's constructed. So to do this, we're going to use an API resource. Really, if you think about the way Inertia works is you're sending API requests to your back end with Vue to actually fetch this data.
02:00
So it's no different really in terms of data than a standard API. So let's go ahead and do this. If you've not worked with API resources before, that's fine. We're going to go ahead and use Artisan to make out a resource called post resource.
02:17
Now, what that's going to allow us to do if we just head over to that post resource under app HTTP and resources is customize in here what data we want to be shown from that post. So if we just go back over to post index controller, grabbing this data here and saying post resource and collection, because we have a collection of posts passing that in, each of these posts can now get transformed via this post resource. And we reference the post that we are currently iterating through using this.
02:53
So this ID and let's just say we want the body for now and not the created at date. That's two pieces of data now rather than the five pieces of information that we have in there before. So let's go back over and check out what's being dumped out now. And there we go.
03:09
Much cleaner. We have a very simple list of just the data that we want. And it's actually now wrapped in this data property. Now, you don't have to have this data property if you don't want it.
03:21
Typically, when I'm working with Inertia, I'll disable this because it just means that we have another thing to go into. And to disable this, we could head over to our app service provider. Under boot, we can go ahead and reference the JSON resource object. And we can say without wrapping.
03:37
What that will do then is just give us back a standard array of objects like we would expect if we were just passing that model data down. And it just means that we don't have another wrapper to deal with. So now that we've got this data, we can go ahead and output this over on our index. We can do this by just iterating through each of our posts.
03:57
So inside of this wrapper div, let's go ahead and do a v4 post in posts. We'll go ahead and give this a unique key, which is just going to be the post ID. And then in here, we will just output the post body. And let's have a look.
04:14
And there we go. We've got all of our posts that we have pulled through in the latest order. So the latest at the top. Now, the good thing about having an API resource for our post is that we can customize how we want the created at date to be displayed.
04:29
For example, if we just say this created at, that's pretty much the same as what we had before. Let's go over and just add in the created at date before this, like so. And we'll see the following. So we get the actual whole timestamp in there that we would normally see.
04:48
But what we can now do is customize this. So we could say diff for humans, for example, if we wanted to. That's going to display how long ago this was. Or you could just go ahead and say something like to date time string, which is going to transform this into something that's a little bit more readable for people as well.
05:08
Now, the icing on the cake really is that because we're now working within a single page application, if I post another comment, we'll have no full page refresh here. What inertia will do is it will reload all of this information once we have sent a request to submit this form through. So if I hit post now, you can see that that data now just rolls in and it works just like an SPA in the way that you are sending an API request, but directly from view to Laravel. And it's just refreshing all of that data for you.
14 episodes•1 hr 7 mins•1 year ago
Overview
The Laravel ecosystem gives us packages like Laravel Breeze and Jetstream which come ready set up with Inertia installed. But what if you want to install Inertia from scratch and build your own features on top of it?
In this course, whether you're new to Inertia or not, we'll be covering getting Inertia set up on a completely fresh Laravel application. We'll walk through some nice additions like server side rendering, styling with Tailwind and installing Ziggy for named routes.
To finish off the course, we'll build a simple app where we can post comments to a timeline, to bring everything nicely together!
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Comments
No comments, yet. Be the first to leave a comment.