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.