Getting Started with Firebase 9 #8 - Ordering Data & Timestamps

Key Takeaways

all right then gang so when we retrieve documents from a collection whether that be through the get docs function or the on snapshot function the documents that we get back seem to be in no apparent order they're not in alphabetical order when it comes to the author or the title or any other kind of property but in actual fact they are they're in order according to the id now remember firebase automatically generates these ids for us and they are random so by ordering by id then they are in kind of a random order okay according to our data but we can order our queries so that we can order them by properties so i could say okay order them by author value so they're alphabetical by order or title or some other kind of property and that's what we're going to do now okay so to do this is really simple all we need to do is first of all import a function called order by from firestorm then down here when we create the query we need to pass it in as another argument so after the where clause over here i'm going to pass in the order by function now the order by function takes in an argument which is the property we want to order by so for example i could say order by title and then we can pass in descending or ascending right here so i could say descending for example as the second argument now if i save this and preview in the browser then we're going to see this error in the console and it's basically saying look we can't just get this query without first creating an index for it so click on this link and that's going to open up your firestore console to create an index so just click on this button to do that right here and this will just take a couple of minutes to do and while the status is building it means it's still building and this won't work so we just have to wait for a few minutes all right then so once you see this status as enabled it means that we can go ahead and get that query where we're ordering by the title in descending order so if we take a look over here and refresh now if we open up this array then we should see that it's ordered by the title so you can see the wise man sphere the name of the wind and then abc so the letters nearer to zed are starting first and then the letters nearer to a are at the end because this is in descending order if it was in ascending order then the first one would be this then this and then this all right so we've ordered by the title but now what i'd like to do is create another property on our object right here or on our documents called createdat and that would be a timestamp and it will represent the time that a user added that bulk and then we can order by that timestamp so the first thing i'm going to do is delete all of these documents right here now to do that i'm just going to go to our data in the fire store and by the way i could have done it from here if i wanted to but this the way is quicker because i'm going to go over here and delete the collection and if i type in the collection right here it's going to delete all the documents inside that collection for us so that now in the future whenever we add new documents we're going to add that timestamp value to it as well all right then so first of all we want to add a created app property to every new document that we create so that we can order by that created at property so i could say created at right here and we need to set that equal to be a timestamp now we don't just use a date object or anything like that when we're using firestore we use a special firestore timestamp and we need to import a function to create one of those so up here i'm going to import something called server timestamp like so now when we invoke that function it creates a timestamp for us which is stored in the firestore documents so down here i'm just going to say server timestamp and invoke that to create a timestamp to be the value of this created that property so now every new book we create is going to have that timestamp which says when the book was created and then i want to order by that created that property so i'm going to go over here and get rid of this and then i'm just going to say by created at like so now by default it's in ascending order so i'm going to leave it right here we don't need to pass in the argument ascending and then also if we wanted to we don't have to have the where clause right here if i just want to get every document then i can delete this it doesn't really matter which is what i'm going to do and i'm going to save this now we're going to add a few documents and try this out all right then so we can see that the data is empty currently so let's add some new documents i'm going to say the wise man's fear first of all which is by patrick rothfuss and then add that book i'm also going to add in a new one by him which is the name of the wind and then patrick rothfuss all right enter and then i'm going to add in another one the way of kings that is by brandon sanderson and press enter so now they should be ordered by that created at property so let me just open up this most recent snapshot right here and we can only see one inside there so what i'm gonna do is actually just refresh to make sure we're getting the correct code okay so now we see three and now inside here we can see that we have a created up property in each of these individual objects and they're now ordered by that created that property we can see this order right here is the order that we added them we added this one first then this and then this one and if we add in a new one let me add in the final empire by brandon sanderson and press enter that one should now also appear at the bottom so you'll see brandon sanderson down here at the bottom the final empire and the others are still in the correct order as well now you'll have noticed when i'm adding a new book now i'm actually getting the data logged to the console twice let me just show you a b c d e f at the book and we can see the data logged twice so why is that well it's because we added on that timestamp so when we do that it sends the information to firestore it adds the document and we get a snapshot back but then it takes a short amount of time for firestore then to add the timestamp and when it adds that to the document it sends us back a new firestore snapshot because the data has changed does that make sense so that's why we're getting these two different things load to the console right here every time we add a new document