Communicating With The Supabase Database

[00:00 - 00:03] All right, welcome back. In our Storyboard page, now we have two dummy data.

[00:04 - 00:16] So what we want to do is we need to get these data from the database, but also first we need to add these data to the database. So when user click on the Add a Story, we want to add this data to our Story table.

[00:17 - 00:22] So right now the database is empty. So in order to do that, let's get rid of this dummy data that we have here.

[00:23 - 00:35] If you go back there's no data now. And a new Story component that we built, what I want to do is when you click on this whole box, right now it's only console login something.

[00:36 - 00:43] So I want to create a function called Add Story. So this is a sync function and create this function.

[00:44 - 00:56] And now we can call it here. And now in this function, what we need to do is we need to connect to the database and add the Story, insert the Story.

[00:57 - 01:08] So first we need to get the instance in our super base. So you can use Create Client Component Client, this function and you can also do it here.

[01:09 - 01:15] And inside this you can connect to the database. So you can do anything here, select or insert or delete.

[01:16 - 01:27] So what I want to do is insert just an object and we can have the title. We can have something like a new Story and then we have Story image.

[01:28 - 01:35] So right now we cannot upload images but we can copy paste some URL that has image. And then at the end you can say select.

[01:36 - 01:39] We get the response, what we entered. That's basically it.

[01:40 - 01:52] And let's see if we can add data to the database. So if you go back I clicked here and if I go check the database, it is refreshing real time you see the data here.

[01:53 - 02:04] And the next one is we need to fetch this data and then we need to show it on our page. In order to do that we need to go to our Story component.

[02:05 - 02:07] Right now there is nothing. We had something called Story Story here.

[02:08 - 02:17] And so on page load our page is loading with the server. So if you go here, here on the Story, the Server Story is empty.

[02:18 - 02:28] What we can do is on the Storyboard page, this page, we can fetch the stories and pass it to client component. So basically we can do the same thing here.

[02:29 - 02:34] Right now we use the instance already here. So what we can do is select data again.

[02:35 - 02:45] Now we can pass this into this component. The first load, this should show the data.

[02:46 - 02:56] So let's see in the Story page we get Service Story. So unless we are passing this to the, our Stories state wouldn't show up.

[02:57 - 03:01] And we need to do that change here. And then yeah, let's go back to our app.

[03:02 - 03:14] We get this error because the host name is not in next-js config. So if you go back to our project, if you open next config file and add this domain to our images CD and list.

[03:15 - 03:26] And if I think we just need to restart the server. And just like that, we have the story that we just added.

[03:27 - 03:34] And yeah, if we add another one right now, we added it to the database, but it is not showing here right away. The real-time part is not working here.

[03:35 - 03:42] So if you refresh, there should be two stories, but we need to do this in real-time. This is when the time we can start using real-time feature from Superbase.