This episode is for members only

Sign up to access "Build a Realtime Chat with Laravel, Vue and Pinia" right now.

Get started
Already a member? Sign in to continue
Playing
11. Fetching and pushing previous messages

Transcript

00:00
Let's change this up a little bit. So if we're not intersecting, we go ahead and return. And then otherwise, down here, we
00:06
want to access our store and load in any previous state. So let's just define out how we want this to look first, and then we'll add in the action. So let's say load previous state.
00:16
And we need to pass in the slug of the room. Now, we don't have that passed in as a prop at the moment. Let's just define it out, and then we'll pull everything together.
00:26
So let's say props room slug. OK, so the first thing is we want to accept into here the room as a prop, or just the slug. You can pass just the slug in as a string if you want,
00:38
and we'll set that out as props. And then over in our room, we want to make sure we pass down the room that we have inside of our overall room to that component.
00:48
And now, all we need to do is just add in this load previous state. So we didn't call that store. We called it messages store.
00:55
So let's head over to the messages store and create that out. OK, so we've got our fetch state action. Let's create out a load, or let's
01:04
call that fetch previous state. Kind of makes more sense. And let's create that out in here. We know that we want a room slug to be passed into here.
01:14
And let's just console log on that room slug so we know everything is working. All right, so let's change this over to fetch previous state. And this should work now.
01:24
So now, when we scroll up to the top, there we go. That's the room slug that we're dumping out over in fetch previous state. Now, to fetch our previous state,
01:34
all we need to do is call another action, fetch state, with an incremented page number. Remember, we're storing the page number up here when we grab this.
01:43
So every time we call fetch state, the page number will always increment, because we'll always be on that page. And it will load in more data and push this.
01:51
Remember, we pushed this to a new array, binding in the previous messages. So this is incredibly simple. We just need to call fetch state, pass the room slug in,
02:02
and then take the state of the current page and add one. Now, at the moment, we're not actually passing the page number in. So this is just going to load the same page
02:11
over and over again. Let's just make sure we've got this working, first of all, and then we'll go ahead and add that page number in. So let's scroll up and let's see what happens.
02:19
So when we get to just near the top, that should go ahead and load more in. But as you can see, it's just loading in the last batch of messages,
02:29
which is page one. So really simple change. We can just add in the page number directly in here that we want to load in.
02:36
Laravel's pagination will take care of this and it will push on the previous bunch of messages. So let's keep track of the message numbers, which is why we've outputted them in here.
02:44
And let's go all the way up to the top and check this out. So we've got nine, seven, five, four, three, two, one, 70, 69, and there we go. So every time we now bump to the top,
02:56
it's just going to keep loading those messages in from the previous page. And of course, what you can do here is now go over to the message index controller
03:06
and bump this value up a little bit. So you get more messages loaded in initially, but of course this is still going to work in exactly the same way.

Episode summary

In this episode, we update our messaging component so that it can fetch and load previous messages as the user scrolls up—essentially building out the "infinite scroll" for a chat.

First, we set up the ability to pass a room slug as a prop into our message viewer, so we know which conversation to load more messages for. Then, over in our store (where we're tracking messages), we add a new action called fetchPreviousState to handle loading earlier messages for the room.

We make sure that each time this function is called, it requests the correct page from the backend, incrementing the page number accordingly so we don't just keep getting the same old batch of messages. Laravel's built-in pagination on the backend takes care of stitching everything together, so when we scroll up, the previous set of messages just gets pushed onto the start of our message array.

By the end of the video, we see that scrolling to the top loads more and more messages as expected, and we even discuss how to control the initial number of messages loaded. All in all, it's a nice step towards a slick, user-friendly chat experience!

Episode discussion

No comments, yet. Be the first!