Listing through discussion posts: Build a Forum with Inertia and Laravel

00:06

Now, we need to think about this because we could potentially have thousands of replies or posts within a discussion. We're going to want to paginate these for obvious reasons, but that means that we can't really include the posts on the discussion API resource. Normally, what we would do is over on the discussion resource, we would create out a relationship like this called posts.

00:29

We would use the post resource, which we haven't created yet, and then we would just output a collection here of posts. The only problem with this is we can't paginate something, at least not easily, within an API resource. So what we're actually going to do is over on the discussion show controller, we're just going to create out a separate collection of posts directly as a prop that's being passed down.

00:53

This doesn't matter because it's one extra query, but it gives us the flexibility and cleanliness of being able to paginate directly within here. So how do we do this? Well, first of all, we need a post resource. So let's create that out first of all and just output some basic data within there. So we'll create a post resource here and let's head over to that post resource and just figure out what kind of information we need here.

01:17

So probably obviously the ID, because we need to use that. So this ID and we're going to need the body of this as well. Later on, we're going to be adding markdown. So we're going to be changing this over and we can also relate this back to a user as well. But let's just leave that for now so we can work on other stuff.

01:36

So we have our posts here. We're going to use our post resource. We're going to use the collection method like we've already seen. And then into this, how do we grab all of the posts for a particular discussion? Well, we're going to set up a new query builder here, but we're going to say where belongs to and we're going to say where it belongs to that discussion.

01:57

So this will only fetch posts that we have for the discussion that we're currently looking at. Now, we're going to want to do some eager loading here as well. We will. Let's do that now. So with user and discussion.

02:13

Because we're going to need them later, we'll eager load them in first. We're going to say oldest here, because remember, the latest posts need to be at the bottom rather than the top. And then now what we can do here is paginate this so we can paginate these by 10, whatever. We'll be switching that back to one to test pagination out later.

02:33

So now that we've got these posts, what we can do is over on the forum show page, we can go down here and start to iterate through these. So let's just figure out where we are here. This is the top banner. And down here, we want to start to iterate through them.

02:49

Let's just dump them out first of all. So posts. And of course, we want to make sure that we allow our posts here to be passed in. And remember, that's going to be an object again, because we're working with the pagination.

03:02

So it's going to have both data and meta properties. OK, there we go. We have our posts in there that we've defined and we have all of our pagination links as well. So we'll go ahead and create out a simple component to house these like we did for each of our discussions.

03:17

So under components and forum, let's create post.view. We'll keep this super simple now. We will accept in the post as a prop. So we'll use define props here.

03:32

Accept the post in, which will be an object. And then in here, let's just create a wrapper and output the post ID just so we have something to work with. So now we can go ahead and pull that component in. So let's go up to the top here and pull in post.

03:48

And that's under the forum folder. And let's go down here to where our posts are. Define that post out. Iterate over these.

03:58

So post in post.data. Key this by the post ID and then pass the post in to that as a prop. So now we should have one and two out there. Great.

04:11

OK, so let's steal some styles from the discussion component because it's going to be very, very similar here. We'll just have pretty much all of this. So we'll just copy this link over. We don't need this to be a link, but let's just add that in to here.

04:26

So it's a little bit easier. Let's change this to a div. And of course, we'll get rid of the href because we're not going to need that. And let's go ahead and just end that tag down there and re-indent that.

04:37

So we now have the following. Great. So these are each of the posts in here. Once again, we'll do something similar to when we output our discussions where we wrap this in a div.

04:50

And then we set a specific space Y of three just so they're kind of more grouped together than the top here. We could even just get rid of that. And because these would look a little bit disjointed otherwise, we can set the space Y of three on there so everything sort of sits together. Because remember, this will be the first post for this discussion title.

05:10

OK, so let's go over to our post component and we're just going to output the post body in here. And as you can see, that's working nicely. And to be honest, I think for now that is everything we need to do. Let's head over to the next episode and just fill in a little bit more information like who posted this and when.

Sign up to access "Build a Forum with Inertia and Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion