Firebase with React, v2 Querying the Database
React devs might find this archived course helpful to reference, but this course has been updated! We now recommend you take the Firebase Fundamentals course.
Transcript from the "Querying the Database" Lesson
>> Steve Kinney: So what we'll do right now is, we are simply going to, when the application component mounts. We will go query FireStore for all of the zero posts that are in there, right? So we'll start small, but it'll be good, so we'll go ahead, we'll skip past all of this default state and we'll do componentDidMount.
[00:00:22] When component mounts, we'll say posts, now, all of Firestore, all is a strong word, 95% of Firestore is asynchronis, right? And it's all promise based, and so if you're not super comfortable with promises. You are about to become more comfortable with promises because we are going to spend a bit of time together working on them.
[00:00:47] So if you do something like post and you said firestore.collection, posts. And this brings me to the collection, this places me at the post collection. If I want to get all of them, I do a .get and we say, console.log, posts. This is not going to work super well, I'm actually going to make that an object so I can see what it was.
>> Steve Kinney: And we'll flip back over, you can see that I get a promise. I don't get the zero posts that are in there, I get a promise of posts eventually, right? Which means I have asked Firestore for the post, I have not received them yet, I will let you know when I get them.
[00:01:29] So we do need to resolve the promise before we can do anything with that. We'll see a few different ways to go about doing that in a second. All right, the other thing we see is this big, mean old warning, right? You're like, I didn't even do anything yet, why am I getting yelled at?
[00:02:12] And so what we need to do is, we need to opt into that. The nice part here is while this warning looks big and mean, they give you the answer in here, right? I used to teach developers and one of the things I learned very, very early on is that none of us actually read error messages, [LAUGH].
[00:02:34] So it looks scary and big, but if you read it, it's actually not so bad, right? It's saying, basically, make your Firestore, and then go ahead and do this, put these settings in place. Let's go ahead and we'll copy that and we will bring it back over to our firebase.js.
[00:02:51] Which is where we do all this fun configuration stuff. And we will basically say, we'll have the settings object, which is simply timestamps.
>> Steve Kinney: timestampsInSnapshots, true, and we'll set those settings, you might be like, what other settings are there? Well, let me save you the, let me save you the work, I've read the docs, this is the only setting.
[00:03:18] So, I'm just going to go ahead and collapse that down like that. This is the only setting for Firestore at this point, but it does give them the option to have more at some point. But if you're like, I want to tweak other things, there's nothing else to tweak, I'm really sorry, but.
[00:03:35] All right, let's go back, we have no more error, we do have that promise in there. There we go, my responsive design skills were lacking, I needed to fix that. So what we could do, we have two options for dealing with these promises. We can go ahead here and we can say, we can do a .then, that'll work.
>> Steve Kinney: And we'll say.
>> Steve Kinney: I'll talk about why I'm calling it a snapshot in a second.
>> Steve Kinney: So the .then is basically on the promise, saying, when this promise resolves, this is what I want you to do. When we hear back from firebase, this is what I want you to do, and so we'll take the snapshot that comes back from the database.
[00:04:21] And it's called a snapshot because it's a real time database, which means that is the data at that point in time. That is a snapshot of the current state of the world, based on your query that might have changed since then. So we'll go ahead and we'll flip back over.
[00:04:37] And you can see that instead of a promise now, we still have that other one that was outside that we left. We have a query snapshot, that makes sense, we queried the database for all of the posts. All right, cool, all right, let's flip back and talk about that for a second before we play around a little bit more.