Build a Realtime Chat with Laravel, Vue and Pinia
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
08. Fetching messages into our store

Episodes

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

Transcript

00:00
Now that we have our messages endpoint, let's create an action inside our Pina store to go ahead and pull this in. So let's define out the actions that we want inside of here. And these are just methods, basically, or functions.
00:12
So very, very straightforward. And let's go ahead and define our effect state function in here to go ahead and grab this for us. Now, we're going to need to know which room slug we're working with. So let's pass that in, first of all.
00:25
And we also want to know which page that we want to load in. We're going to be re-invoking this action when we want to load in a new page. So we're going to need to know how to pull this in. So let's just console log in here.
00:36
And we'll just say fetch state. And let's invoke this over from our room. We can invoke this from anywhere, but it kind of makes sense to do it directly from here. OK, so our props are down here.
00:46
Let's pull them up to the top, which is probably where they belong. And let's define these out as a variable so we can access the slug from the room object we're passing in. So in here, we're going to use our messages store to fetch our state, passing in the room slug.
01:04
And we set a default for the page, so we don't need to pass that in here. Let's go over to the browser, back over to our actual room. Let's bring up our console. And we should see that logged out.
01:14
Great. OK, time to actually fetch them. So let's go back over to our fetch state method. And we're going to use Axios to do this.
01:21
So let's make sure we import Axios at the top here. You can use fetch, but this just comes with Laravel by default. So it kind of makes sense. OK, so we're going to say Axios get.
01:32
And in here, we know that we want to go to rooms. We need to pass the room slug in. And then we want to access that messages endpoint. Then once that is successful, we want to go ahead and grab the response
01:47
and do something with the response. For now, let's just console log on the response data that we get back. And we should see all of the messages output in here. So we've got 100.
01:57
Now, this is paginated. So we've got data, links, and meta. We can use this to keep track of the current page. And we actually added that just up here.
02:06
So it's always assumed that we're on page one. Let's go ahead and update the state in here to reflect the current page. So let's set the page state in here to the response data, meta, and then the current page.
02:22
So that should now store the current page for us. And we can keep track of this within our store. Then we want to go ahead and set in the messages. So let's go and set our messages state.
02:33
Now, with this, what we want to do is whenever we invoke this, we don't just want to set this to the response data and data, which is the array of messages, because then that's going to override the entire state for us.
02:48
Instead, what we want to do is always push them on to the state. So to do this, we're going to create out a new array. We're going to spread out the current messages from our state. And we're going to create a new array with the spread out data that we get in.
03:03
So that's just basically going to create a new array with them combined items. So let's grab response data and data. And we should now have our messages. So now that we've done this, and we're fetching this,
03:15
and it's adding it to our state, let's create out a new component within our component section to dump this data. So I'm going to create a new view component called chat messages. And we'll be able to read our state from this component.
03:29
So we're going to do everything that we've already done. So at the top of this component, let's go ahead and import our use messages store. Let's go ahead and create this out again as messages store and invoke use messages store. And in the template, let's just dump from our messages store all of our messages.
03:47
And then that should unload within the room component, hydrate our store, and then we'll see all of that data. OK, so let's go over to our room again. And we'll pull this component in.
03:59
So let's go down to just up here. Let's output our chat messages component. And let's space these two things out. So let's space these on the y-axis by three.
04:10
OK, let's give the page a refresh. And there we go. So that loads in all of our state for us. And we can start to iterate through all of this data.

Episode summary

In this episode, we wire up our message fetching logic to our Pinia store. Now that our messages endpoint is available, we build a new action in the store that handles fetching those messages from the backend. We make sure to pass in the room's slug and the desired page (for pagination!) whenever we call this action.

Using Axios, we call our messages API, then update our store state with the current page, and cleverly merge the new messages with any that are already loaded instead of just overwriting our state each time. This way, loading the next page simply adds the additional messages to what’s already there.

To make use of our fresh messages store, we create a new ChatMessages component that pulls messages from the store and renders them. We drop this new component into the room view and make sure everything lines up visually—with just a quick style tweak for spacing.

At the end, we try everything out and confirm it's working: our messages are fetched when the room loads, stored in the state, and displayed in the chat UI. Pretty satisfying to see the real data flowing into the app!

Episode discussion

No comments, yet. Be the first!