Firebase with React, v2 Creating a DocumentSnapshot

Transcript from the "Creating a DocumentSnapshot" Lesson

[00:00:00]
>> Steve Kinney: What we wanna do at this point is we wanna actually begin to iterate those documents. We saw that we have this query snapshot. Let's refactor this code a little bit and then let's go ahead and actually see all of these. Now, we know that are no documents in here yet, but we'll fix that momentarily.

[00:00:17] But let's go ahead and refresh this code a little bit. Because everything's really promise-based, you get really comfortable with promise chaining, which is a art in and of itself. Or we can just opt into the fancy new, async/await syntax, right? This is a Create React app, so we do have Babel.

[00:00:37] So I can use it with confidence, and assume that it will transpile down into what I need for older browsers. So to have an asynchronous function, all I need to do is put the word async before the function. And now, instead of doing then, what I can do is I can say,

[00:00:57]
>> Steve Kinney: const snapshot,
>> Steve Kinney: = await firestore.collection, we don't need that .then anymore.
>> Steve Kinney: Right, so this looks kinda like that synchronous code that we had before, but under the hood it's using promises, and this will wait for the promise to resolve. And then it will go into that snapshot object, and I should see roughly the same thing as what I had before.

[00:01:27] Cool, so that looks a lot easier and nicer. That is going to be a syntax that we use a lot today because it is easier to reason about. So the snapshot has a query snapshot, which we know has a number of documents. It has that forEach method on it, so we'll say snapshot.forEach.

[00:01:51]
>> Steve Kinney: And we'll go ahead right now and we'll grab the const id = doc.id, and now let's get all the properties of the object. Const data = doc.data, which is a method, and then we'll console.log the id and the data.