Getting Started with Firebase 9 #4 - Firestore Setup & Fetching Data

all rather than gangs so now we've connected to our firebase back end over here the next thing we want to do is set up a database and then connect that database from our front end so that we can reach out and grab data from it so the first thing we need to do is enable that database on the back end so you can see we have all of these different features right here the one we want at the minute is the firestore database there is this older real-time database as well but we're going to use this one right here so click on firestore database and then when this page loads you're going to see a create database button so click on that and then make sure you start in test mode otherwise you won't be able to access your data now this is all to do with firestore rules and i'm not going to delve into those in this series but i will do a complete series in the future all about firestore rules so make sure you're in test mode and then click on next choose a firestore location and then click on enable and now we can see it's created this database for us all right so this database is split up into collections and documents so we would have a collection of a certain data type for example in this little application or website that i'm going to make we're just going to have a data type called books and they would all be in a collection called books so i could create that i'd give this a collection an id or a name i'm going to call it books and then when we create that it's asking us to also create a first document inside this collection now each document has to have a document id so that later on if we want to grab a single document from the database we use the id to get it now i'm going to click on this so that firebase automatically generates that id for me a unique one all right and then inside this document we have different properties and values now the property is called a field in firestore so for example i could have a title of a book right and the title could be the name of the wind so that's the title of the book and by the way we'd specify the data type right here now we're sticking with string i can add a new field for example auth as well and i would say that is patrick rothfuss like so so i'm going to save that and it should create a new document with the id inside this box collection and we see the two different properties of that document right here so what i'm going to do now is add a couple more documents but i'm going to speed this up so you don't have to watch me do it in real time all right then so now we have our firestore database set up and we've created a few documents inside that firestore database next i'm going to show you how we can connect this database from the front end our website and reach out and grab these different documents so that we can do something with them all right so first off you can see i've added in a few different comments and these comments are what we're going to do in this lesson right here this one is just for initializing the app to begin with all right so the first step is to actually connect or initialize the firestore service on the front end so we can connect to it now to do that we need to import a function from the firestore part of the firebase library so we say import then curly braces now i'm going to be importing many many things inside the next few videos so what i'm going to do is place them on different lines for each video so they don't go off the screen and way over to the right and we can't see them so the function we want to initialize the firestore service on the front end is called get firestore and that will be a pattern for the different services that firebase provides us with if it was auth that we wanted to initialize it would be get auth all right so you'll see that kind of get and then the service name pattern so that's a function and it comes from firebase forward slash firestore because this is the service we're using so all we have to do is invoke this function right here to initialize the service so i'm going to say const db is equal to get firestore like so and this db is for database and it represents our database connection which we're kind of storing in this constant now and anytime we do something with the database like reach out to get data we're going to use this constant right here to do it okay so we've initialized the firestore service the next thing we need to do is get a reference to a specific collection in our database so it's almost like us reaching in a hand and grabbing hold of a specific collection that we want to get data from and that's called a collection reference so what i'm going to do is i'm going to create a constant called call ref and that stands for collection ref now we need to import a function in order to get a reference to a specific collection and that function is just collection and it comes from the firestore part of the library so we say collection down here and we invoke that then as a first argument we pass through the database so we know what database to look in for the collection and as a second argument we say we want the box collection now if you've used previous versions of firebase already this is going to look quite different because previously we might initialize firestore a slightly different way we would say something like this firebase dot firestore to initialize it and then also oops not config right here and also we would store that in a constant as well so const db is equal to firebase.firestore and then we would say something like db.collection and then box to get a reference to the box collection so this is older versions of firestore or firebase but now what we're doing is we're just using the function not on the db object but we're just importing that function from the firestore library and then we pass the database object in as an argument and also as a second one the collection we want to reference to now this reference is now being stored inside this constant collection ref all right so the next step is to get the collection data and again we just import a function to do that and that function is called get docs so if i come down here all i need to do is say get docs like so and we're passing the collection ref as an argument so paste that in and what this does is go out look at this collection and try to retrieve all the documents inside that collection now this returns a promise so we can tack on a then method which finds a function when this task is complete and this function is going to contain a snapshot of that collection at that moment in time when we reach out to get it and on that snapshot object we have access to all of the documents so what i'm going to do to begin with is just say console.log snapshot and then use a property called docs which represent all of the documents so i'm going to save this now so that we can preview it in a browser all right so now in the browser we can see this array right here of three different things and each of these different objects right here represents a document inside that firestore collection remember i created three documents right and we've grabbed all of those three documents right here now if we open up each one there's loads of different properties and also methods on this object now we're not interested in most of this stuff all we want is the data and maybe the id of the document as well now the data is grabbed by using a data function right here so we need to call the data function on each of our documents right here to actually get a data object that contains the title and also the author of each document right and then we can also grab the id property of each document as well so all i'm going to do now is i'm going to cycle through these different documents right here using a for each loop and i'm just gonna grab the data i want from each of those documents so that we can output it in a more elegant way okay so first of all i'm gonna get rid of that console log right here and instead i'll create a new variable using let's because we're going to change this and it's going to be called box and we'll set it equal to be an empty array to begin with then what i'm going to do is cycle through the docs on the snapshot right here so that i can add my own custom object which represents each document or each book inside this array so what i'll say is snapshot.docs and then use the for each method to cycle through those and then each time around we fire a function for each item now we take in that document right here so i'm just going to call that doc and then we can do something with that doc each time around all i want to do is get some data from it and then push that to the array so i will say books dot push and we're going to push an object to the array each time so each book is represented by an object now what i want to do is get the data from the document and remember the data is the title and the auth properties now like i said a minute ago the way we get the data is by using a data method on the doc object right here so i can say doc dot data to get that and that returns an object with the different data properties the title and the author so what we need to do is spread that into our new object so using the three dots so it takes those two properties and it just outputs them into our new object also i want the id and that's going to be a property on my object as well so we can get that by saying doc dot id so now what we're doing for each of the documents on that snapshot we are adding a new object to the box array and for each object we get the data and also the id of that document so it's going to look a bit cleaner in the console when we look at those different documents and now after we've done this for each loop all i want to do is log out the box so i can say console.log and then the box array all right then now before we preview this we can also tack on a catch block down at the bottom so catch just in case there's an error and in which case we get that error in a function which we can fire and all i'm going to do is log the error to the console if there is one now in our case there won't be one because everything is working but if there is an error then it would log it to the console then all right so let's preview this all right so now in the console we can still see an array of three items each one representing a bulk now if we open up that array you can see that each object is a bit leaner than before now we just have the information on it that we need so the author property and the title which comes from the data method we used and also the id as well which is the id of the document just in case we need that later on and in fact we will need that in the next lesson where i'm going to show you how to delete documents so we'll use the id for that but also add new documents as well from the front end not directly in the firestore database

Channel: The Net Ninja

Views: 11,305

Keywords: firebase, firebase tutorial, firestore tutorial, firestore, tutorial, firebase 9, firestore 9, firebase 9 tutorial, firebase auth, firebase auth tutorial, firebase auth 9, firebase version 9, auth tutorial, firebase 8 vs 9

Id: 2yNyiW_41H8

Length: 11min 21sec (681 seconds)

Published: Tue Nov 09 2021