Retrieve Data with a Supabase API Request

Kristian Freeman: [0:00] Back in our code, we've successfully setup authorization or authentication using the GitHub provider. As you saw when we come back into our user interface, it can now says logged in. We've successfully logged in as our user.

[0:15] Instead of just showing the span here, we can begin to show the actual user interface that we care about. What we're going to do is make a new component like auth, but we're going to call it chat.js.

[0:26] Just like we did at the beginning of setting up our auth variable, I'll make a new function called chat. Let's just return a div, and then we will export that as the default export for this file.

[0:38] Now, back in index.js, let's import that just like we did with auth. In fact, I'll just copy paste it and just change the value slightly. Then, down here, I'll replace logged in with chat. You can see now it's blank. I'm rendering the chat component here, but there's not much information.

[0:57] What I want to do is start getting data here inside of my user interface. To do that, I'm going to use the Supabase client like I did in the auth. What I'm going to do is paste it in here as a prop to my chat component. Just like earlier in the auth component, I will destructure it out of here into the function IU, which means I can now console log Supabase here. I have access to it inside of this component.

[1:27] If we right-click and inspect here, go to console, there it is, our Supabase client with all of the information that we need.

[1:34] Now, we're building a chat application. We have users and we have messages. What we want to do here when this user interface loads is, of course, we want to get our messages. To do that, we're going to learn about how to make select requests. That is the SELECT SQL query that we learned earlier, but in the context of the Supabase Rest SDK.

[1:57] If we come back here into the dashboard and go to the API section, and then we go to tables and views message, you can see that the API documentation has automatically generated all the information we need in order to begin making requests to our Supabase databases, which is really handy.

[2:17] For instance, I can do things like look for a specific ID, or message text, content created out all of this stuff. Instead, let's come down here a little bit and get this very basic example, read all rows. We say let data is set to the variable message. Then error comes back as well. Then we say await Supabase.fromMessage.

[2:43] You remember, this is our table here, message, and then .select the star, which says get all of the columns or all of the information like ID and content create that and stuff like that, from this table message. Let's use this in our component to get some messages back.

[3:04] I'm going to copy this code and inside of here, I'm just going to set up a new variable called get messages. This is going to be an async function which will run this code. I'll let it autoformat by saving.

[3:20] In this case, because this table is called message, it's actually automatically in Supabase formatted this as the variable message. You can actually think of this as messages. This is going to be a list of messages that come back from this table.

[3:34] What I want to do is console log messages. We've set up this asynchronous function, but because it's running inside of a component, this isn't actually going to work until we do something. Call this get messages function or figure out when we want this function to be called.

[3:52] The way we're going to handle that is by wrapping this entire get messages function in a use effect hook. We'll call it when the component runs for the first time we'll say, get messages.

[4:03] Then we'll probably want to even persist it into a use state hook or something like that so that we can show it inside of our interface. To start, let's come up here and import use effect and use state from React.

[4:16] Then here, we're going to say use effect which is a function and inside of this we're going to do an async function. Let's take this code and paste it inside of this use effect call. Now what we need to do is call this function. I'll say, await, get messages.

[4:36] Then finally, I need to pass a second argument here which says, when this use effect call should run, based on variables that may update. In this case, I'm going to pass an empty array which says only run when the component is rendered for the first time.

[4:52] If I come back into my user interface and I refresh, it doesn't seem like anything has changed. If I do inspect here and go to my console, you can see that it's run and return an array of zero.

[5:03] We don't currently have any messages and so it returns an array of zero here. This is coming from my Supabase API. It is able to make a request and see those messages.

[5:14] Let's come in here to our table editor and let's make any message inside of the UI just so we can make sure the things work like we'd expect. Right click on this and say copy cell content to copy this user ID. Then I'm going to make a new row where I'm going to give it some text, like hello, as well as the user ID for my user.

[5:37] If I say save, I have a new message here with an ID of two and content hello. If I come back here and I refresh, you can see that this array here now contains a message that says, "Content hello created at ID and user ID." I'm successfully getting those messages back from the Supabase SDK.

[5:59] The last thing we might want to do is show this inside of our user interface. To do that, let's use the useState hook to set up a new variable called messages. I'll say const messages, and set messages, and then call the useState function with a default value of an empty array.

[6:16] Now, when I have those messages that come back as these argument messages, I'll just say set messages to. That will represent my messages that come back from the Supabase SDK. You can think of this as initial messages for stuff that is already in the database when the chat page loads for the first time.

[6:37] Down here, we can do something inside of our user interface based on these messages. I'll just make a new line. I'll say messages.map passing in a function, which represents the message. I'll just say div message.content, and then close that div here, which will just return a really simple UI that has the message content inside of its own div.

[7:07] Now you can see if I refresh the page, I have this message, "Hello." That's our first message here, but I do get this warning that says each child in a list should have a unique key prop. This is a very common React thing.

[7:18] Let's fix that real quick by just saying key = message.ID. That'll be the unique ID for that message. If I refresh, there's no errors, and you can see that I have my first message here.