React With Firebase/Firestore | CRUD and Queries | Version 9

today we're going to learn how to use firestore from Firebase in react with the school directory app I recently upgraded this Firebase tutorial repo with the new version of firestore the version 9. this one has been version 7 for quite a while you can mine find version 7 still here in this Branch but today we're gonna look at how to actually connect the version 9 with react uh in a crud app which is this school directory application where you can add different schools with the score also register log in and log out your user and if you're logged in and out of school the email of the person that has added to School will appear here if there is nothing or if there is nobody locked in it says unknown so let's register quickly a new user register and we can see we're logged in here again and if you add another school we can submit that and we can see we have added it so to start we need to set up Firebase you can go here to add a new project give it a name enable or disable Google analytics for this we disable it then we have to wait a minute now the project is ready and we can already go here to build firestore database and we can see there is uh we we can create a database here we can create in production or test mode about the security rules there is a video Linked In the description down below where it's uh where I explain exactly how to use the security rules from firestore so we can click next here we choose a server and now our database is set up one thing we cannot forget is go again to project overview and get started by adding your Firebase uh to your app is if we work in the web we want to click here to web and then we want to resistor in the episode school directory 22 can be any name actually and then here we get our credentials with the API Keys then we can continue back to our console so that's all it takes to set up a Firebase or a firestore project so let's go into the code so before I go into the code I just quickly want to mention that I offer a personal consultation if you want support for your application in any kinds of questions next yes react to JS material UI something like that I would be really happy to help out the link to that is in the description down below but now let's jump into the code so here we have a basic create react app here we have Firebase where the credentials we just seen should be put in here also we need to install Firebase as an npm or a yarn package if you want to see what's all installed you can go here to the package.json and make sure to import the different things from Firebase as you see here to reduce the bundle size if just import stuff from here the whole bundle of Firebase will be included but at the end of the day you can copy paste that the link to the repo is in the description down below so now this will initialize Firebase and auth like the authentication from Firebase so Firebase does not only provide the database but also the authentication methods then let's check out our app here it's a pretty basic application we have the provider welcome login and then the snapshot Firebase Advanced component which is just the listing you see below we will only look at the snapshot Firebase Advanced component as Earth is not in this tutorial I will link at the a video about the the authentication methods of Firebase in the description down below so here to give you a quick overview we have the snapshot Firebase component we have here a one-time get function which is commented out I will get to it why in a minute then here we have the real-time get function so this is where you get the schools this is the ad function where we will add it the delete and the edit so pretty much uh basic crud application and then down here it's the UI which we won't go into detail again three points in the description down below you can check it out there so the biggest difference of using Firestar in comparison to something like a rest endpoint is that firestore does not really prefer the one-time get function so usually if you have a database you use a rest get request to get data and if you then edit some data you get a response back and you put that in your state in your react app in Firebase it works a little bit different in Firebase we have real time updates on our data so what we do is we initialize a connection with our database and then we just listen to changes and if that changes appear we will update our state that we're works very seamlessly especially in react and it's almost the same like working with web sockets It's just sometimes hard for us developers wrapping our head around that as we used to having this usual get post and Patch functions but as I said in Firebase that works a little bit differently if you still prefer this one time get here is a use effects function where we have this one time get the the key here is to use the get docs function which comes from a firestore itself instead of that on snapshot function from which also is imported by firestore but in this tutorial we will only really get into the real uh get function or real-time updating get function as this is way easier to handle and it plays a little bit better with firestore then let's focus on this real-time get function let's Minify that for a bit uh this is the query we will check that out in at the end of the video but here we have this on snapshot function with this collection ref The Collection ref is actually the reference to the collection so this needs to be the same name as the collection we want to Target so if you go to our database we have a collection here schools so this needs to be the same name here and that's the database which comes from Firebase which is the the Firebase app or the firestore uh database that we initialized in the Firebase file here so with this collection ref we now have the reference to which collection we want to Target and then we can use this on Snapshot method from firestore inside of our use effect hook and then in this on Snapshot we get a query snapshot object back or an array back where you can Loop uh with four each then here we have a document the document has the method data and we just Loop over it and push this document data into the items and that's how we get all of the schools or all of these elements at the end of the day and then once that's done we push these items or the schools in set school which is uh the center of our use State hook and that's pretty much all there is to it also don't forget to return this function uh to unsubscribe when the component unmounts then the add function is all almost as uh as easy so we have some business logic up here the new school object one important thing is the Euro ID we add here we do this with the package uuid and then this server timestamp keep in mind to not add new data or something like that as this can't be trusted because new dates so this one here takes the date of the browser but with this server timestamp we can be sure that it's correct because this also comes from Firebase firestore so this method here um so that's the recommended way how to use a timestamp and then this new school object goes in here to set dock which is a method again coming from firestore itself so up here and here we have one different element we have the school ref where he needs the collection ref so this is our database and the name of our collection which in this case is school so again this reference up here and then if you go back down we have this collection ref and then we need to put in the ID so the new school ID that's at the end of the day what we'll show in our database here so this will register that URL so if I would add a new school ID as a string here and add a new school this wouldn't be a UR uid this would be a school.id or new school.id and then we can you just use this school ref and the new school object and that's already it so very very easy and then very easy as well is to delete a school so here we have the school ref again this is document method from firestore again have our collection ref and then what we just need is our school ID we want to delete and then we just use this delete doc method from firestore again um and put in here our school ref and that's it that's the only thing we need to be able to delete a school and then edit School it's almost the same as delete again we have our school ref here and then we put in here our updated School object here into our update dock method from firestore firestore will then automatically compare the changes that we have here and only add the changes um that we wanted here in our updated School object that's one of the beautiful thing about firestore it does that all uh automatically without us having to care about performance issues when we do updates uh in our database and that's pretty much it what we have to you know about a crowd app with firestore so we had edit delete add and now we go back to different queries so what we can do with firestore of course as with any database we can query our data so that means instead of putting or passing our collection rep here as the first argument we use this Q object Act which itself has the collection ref here but then we can add different methods to it like this where this is where also is a method from firestore itself and then we can all filter for example only the schools that have a title of school one so I didn't say it yet so that's why we see different schools so if we have that I don't think we have a school one so let's use School 13. now we save that and now we can see we only get the school 13 bank one important thing to know though is if you want to chain where's together we can use that with this um if we have a different wear here and we want to score only that it's equal or bigger than a hundred which should be the case here because the the score here is 10. so that works but that only works if I've because I've already prepared something here in the indexes so if you have combination queries you need to add an index here if you delete for example this index and try this again so let's reload the app we can see we get this error here and we don't get any data back and the error says firestore uncut error in snapshot this is called failed precondition name Firebase error of course this is a very bad error in the past they had a link where they actually uh directed you to build the index uh directly it's not the case anymore I don't exactly know why maybe they fixed that in future versions of the version 9. so how you would again add this index is if you come here composite create index and then field path that would need to be title and score and this doesn't matter if you don't need this Composite Index as an order by index so here we need to add our collection ID and then here it's for collection not the collection group and then we hit have to create the index and this usually takes a couple of minutes so I don't want to go further into detail here are the links to the documentation you can read it up yourself so this is a real downside and it may be easier to just use a Easy query so a non-composite query and then filter whatever you need to filter on the client so that's pretty much all you need to know to start your firestore app with react I've way more videos about backups and the security rules to make your app secure so make sure to check them out the links are in the description down below or as uh better set the playlist I hope this video helped if you did please leave a like and if you want to see more videos like that don't forget to subscribe see you in the next video [Music] thank you

Channel: Sam Fromaway

Views: 19,455

Keywords: web development, javascript, online marketing, css, html, github, web design, illustration

Id: -yrnWnN0g9o

Length: 14min 27sec (867 seconds)

Published: Fri Sep 23 2022