Installing Inertia from Scratch
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

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

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.

Episode summary

In this episode, we take a look at how to properly show a list of posts in our app using Laravel's API resources. At first, we fetch all the posts straight from the database and send them to our frontend component, but we quickly notice that this approach sends more data than we probably want—like timestamps and other internal columns that aren't really necessary for display.

To fix this, we introduce Laravel's API resources to customize exactly which fields get sent down to the client. This gives us full control over the structure of the data, so we can limit it to just the ID and body, for example. We also tweak the default wrapping behavior so we get a simple array of posts, making things easier to work with on the frontend.

We then head back to our Vue component, update it to loop through all the posts, and render them in a neat list. Plus, we make use of the flexibility API resources give us by customizing how the post's creation date is formatted—for example, showing '2 hours ago' instead of a full timestamp.

Finally, we see how everything ties together as a single page app: when we submit a new post, Inertia automatically refreshes the post list without a full page reload, making the experience super smooth. All in all, by the end of this episode you'll see how API resources can really help structure your data and make your frontend code cleaner.

Episode discussion

No comments, yet. Be the first!