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
06. Swapping to API resources

Episodes

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

Transcript

00:00
So Laravel does a really good job of casting the post models that we want to pass down into an object for us with all of the columns that we have in our database. But if you were building a separate API, any good API, you would want a lot more structure to each of the items you pass down. Now, this is a really important lesson because within Inertia, when you're passing this data to view, you want exactly the same thing.
00:26
If we return back to our index here and just dump the data out inside of here that we had before, so the entire post object, you can see this contains pretty much everything from our database. It's got the created update, the updated update. And sometimes this can be a little bit messy.
00:43
You could reveal things that you don't want to be included in this data, and you might be passing more data down to your view component than you need. And that will have eventually a performance impact. So what we want to do is lean on Laravel's API resources to structure the data that we're sending down to our view components in a much better way. So exactly the same as if you were building a separate API and consuming it with a separate view client.
01:12
So let's get started with creating out an API resource for this data. So we're going to go ahead and say make resource and post resource, and let's go over to that post resource, which lives under app HTTP resources. And in here, we can pretty much choose within the context of this what data specifically we want for this post. And we do that by referencing this, which will reference the current post that we're working with.
01:40
And then you can just output the data you need. So we're going to output the ID because we need that for the iteration within view. And we're just going to output the body in this case. So to do this within here, what we want to do is say post resource collection and then wrap the query and the collection that we get back from this inside of this post resource.
02:03
And just by doing that, what we'll see is we've only got here the ID and the body for each of our posts. We don't have the created app and updated that date unless we explicitly add it to that API resource. Now, one thing you'll notice is this is now being wrapped in this data wrapper, which is the default behavior for a lot of our API resources. This is a little bit awkward because aside from this breaking now, every time we want to iterate through something, we're going to have to say post.data.
02:31
And this can get a little bit messy. It still works, but you're going to have to reference data every single time. So if you don't want to do that, you can head over to your app service provider or any other service provider. And in the boot method, you want to reference the JSON resource class and then just say without wrapping.
02:48
What that will do is it will get rid of that data attribute and you'll just end up with pretty much what we had before, but a lot more structured data. So we just have an array now. So now over an index, we don't need to reference that data. And you can see that this is now just working as it did before.
03:03
So let's go ahead and add some more stuff to that API resource and output everything that we need. So in here, we're probably going to include the user who actually posted this. We don't have a resource for the user at the moment, but we can go ahead and build one of them just as easily. So let's go ahead and make out a resource in here called user resource.
03:23
And again, let's just reference this. So user resource. This time, though, we don't have a collection of things. We just have a single item.
03:31
So we can just use the make method on here and then just pass through the user, which is the relationship for the user. Now, this isn't a lesson on API resources, but it's always a good idea to get into the habit of saying when loaded and then passing through the actual name of the relationship in here. That means that we have to eager load the user every single time. Otherwise, this is just not going to show.
03:55
So now that we've done this, let's go over to our common index controller, making sure we're eager loading the user in so we don't run into any n plus one problems. And then if we head over now, we'll have the user within each of these posts. So to demo that, let's go over to our index and it's just dump the post user out in here. And sure enough, you can see all of that information is included.
04:18
Once again, though, because we're technically working with consuming an API, we're going to want to head over to the user resource and just choose the columns that we do want to show for this user. So we'll go ahead and output the ID as standard and we'll go ahead and output the name. And for now, that's pretty much everything we need. So now we have a much cleaner object here with only the data we need.
04:40
So now over here, we can go ahead and start this up. So let's create a div up here. Let's set the class to semi bold with the font and let's output the post user name. And sure enough, that name is now there.
04:57
And then let's just space things out by wrapping the body here in a paragraph and just adding a margin top of one on top of that. So structuring your data that you're sending down is absolutely essential. It's not like Blade where we just send down everything that we need and then we can just pluck out what we need, because remember, technically, this data is being consumed like an API. So we want to be really careful, first of all, about the amount of data we're sending down and also the specific columns we're passing down as well, because everything on the client side is visible to any user.

Episode summary

In this episode, we take our Inertia/Laravel app up a notch by swapping from passing raw Eloquent models to using API Resources. At first, we see how Laravel by default sends every column of the Post straight down to the client, which can be messy and, worse, potentially expose things we don’t want visible in the frontend.

So, we cover how to structure our data using Laravel’s API Resources, just like you would with a traditional API. We go through making a PostResource and customizing exactly what data gets sent—only the fields we actually care about, not the whole database row.

We also show how by default, API Resources in Laravel wrap the collection in a data key, which is a little awkward for our frontend. You’ll see how to turn that off so the data looks just like you want and is easier to deal with in Vue.

After that, we level up by including relationships: we add the User who created each post using a new UserResource, pick out just the columns we want to send for the user, and review the importance of eager loading to avoid n+1 problems.

Finally, the frontend gets updated to display the user’s name alongside the post, and we recap why all of this matters: sending down only the data you need makes your app safer and faster, plus it sets you up for good practices as your app grows.

Episode discussion

No comments, yet. Be the first!