List Available Chat Rooms in Real-time in Next.js from Fauna

[00:00] We have our form working but we want to see the list of all the existing room here so let's go ahead and implement that so the first thing we're gonna do we're gonna import useEffect from react Next we create a new state for existing rooms and we will set it to empty array for now. [00:21] And I'll remove this auto generated comment here. Next, we're gonna create a useEffect and we're gonna keep the dependency array empty because we only want to run everything inside this useEffect once when the component mounts. Inside the useEffect, we check if the fauna client is initialized. If it's [00:41] not, then we will simply return. Then inside, we're gonna call a function called fetch rooms. Let's go ahead and create the fetch rooms function. And then we're gonna do a try catch block here. And then we're [01:01] gonna do a fauna query. So we're gonna say const response equals await client dot query and then we're gonna do f q l and backticks and inside the backticks, we're gonna write our f q l code block. So we're gonna write room dot all and this will give [01:21] us all the rooms and we'll set the existing rooms to response dot data dot data. Now let's go ahead and write the logic to display these existing rooms. We're gonna scroll down to our [01:41] JSX code and under the form, we're gonna display all the existing rooms. So I'm gonna create a new div and a header and then we'll map over the existing rooms array. And for each room we're gonna have a div and I'm going to change the [02:00] key to room dot ID. Let's, turn this p tag into a button and we'll change this to room dot name and you'll see that the existing rooms are now visible. Now notice that [02:20] creating a new room actually does not update the existing rooms list. We want to update the existing rooms list for every user who's on the app at that moment. So every user would be able to see what rooms are available in real time. That's the idea. So let's go ahead and implement this logic. So back in [02:40] our code, we're going to import use ref from React and we're gonna create a new reference variable called stream ref, which will initially going to be null. And then in the fetch room function, we're gonna create a if statement and check if the stream's ref [03:00] is null or not. And then inside the if block, we are going to do our stream query. So we're gonna say const stream equals await client dot stream and then f q l. And inside this f q l, we're gonna write our fauna query and I'm gonna say room dot all and [03:20] then to stream. So there's 2 things that we have to pay attention here. First of all, we are using the stream method in the client driver instead of the simple query method that we use. So this tells JavaScript that we're about to stream data from Fauna. Now streaming [03:39] happens in near real time, so all the changes in the room collection will be broadcasted to all the connected clients. Now the second part is that we have this to stream function that sits inside our SQL block. Now this tells Fauna that we're going to be tracking changes for this collection in real time. Then we're gonna set stream [03:59] ref current to the stream. This way, we're not gonna reinitialize a stream if it's already initialized. Then we're gonna do a for loop and iterate over every event of this stream. We can console log these events. And then we [04:19] will do a switch on the event type. And then I'm going to add a case for add and a case for update. So every time a record is added to the room or updated, that's when we're gonna go into this code block. So we're going [04:39] to update the area of the existing rooms when something is added or updated. We check if the updated item is already present in the existing rooms array. So we do this with a simple find index array function. Now if the room already exists in the existing [04:59] rooms, we will simply update it and if it doesn't exist then we will add it to the existing rooms array. So here with this map function, we are returning an updated array and setting it to the existing rooms array. Now here I have 2 incognito browser window open, and now if [05:19] I create a room in one of the browsers, you'll see that it will get updated in real time in both of the browser windows. And I'm gonna try creating another one and you will see that it gets updated in the both of the browsers. So now we're getting data in real time.