Complete React Native Tutorial #28 - Fetching Single Records

Key Takeaways

Okay then my friends. So we made a dynamic route for the book details in the last lesson but at the moment all we do is show the book ID, right? And instead we want to show the full book details, the author, the title and also the description. Eventually as well we're going to be adding a delete button on this page so that a user can click on that to delete the book. Anyway, there's a few ways we can show the book details, but I've decided that we're going to manually fetch the individual book from this page. And I like this approach because then if we deep link to a details page from somewhere else and it's going to try and fetch that book when we land on this page. Whereas if we try to find it from the existing book state then well that wouldn't work using the deep link because the state would be empty when we first open the app. Anyway to do this we first of all need to flesh out the function inside the books context file to fetch that individual record. And the function is this one right here fetch book by ID. And we already accept an ID into the function as an argument which we're going to use now to fetch the book. So inside this try block we're going to say const response is equal to await and then we want the databases instance that we had and then we use a method on that called get document. So this is how we fetch a single record. And inside here we still need to pass in the database ID and the collection ID like we do down here. So let's paste those up here as well. That tells us that we want to go into this collection to grab a document. And then we need to pass in the ID of the book that we want to fetch, which remember we have access to right here because we pass it in as an argument. So let's just output that. And then down here, we're not going to update any state because this is a full list of books, right? We don't want to update it with a single book. Instead, what we're going to do is just return from this function. So we'll return the response which will be that book record. Okay. So now that's done, we can head back to the details page and invoke this function. The first thing I'm going to do inside this file is just paste in a bunch of different imports that we're going to be needing as we flesh this out. Then I'm going to come to the component and I'm going to make some state for the book. To do that, we'll say const. Then in square brackets, we'll call this bit of state book. And then we need a function to update it, which we'll call set book. And then we set that equal to use state which needs to be imported remember from react and we invoke that. All right. So the starting value of this is going to be null because we've not fetched the book yet. All right. So now we'll use the use effect hook to run when the component first loads and also when the ID value changes. So we can say use effect and also make sure that gets imported from React. And then inside this hook we can pass a function as the first argument. Now, as a second argument, we're going to pass that dependency array, which just contains the ID. So, when the ID changes, it's going to rerun this function to refetch a different book. Okay. So, inside this function then is where we need to fetch the book. So, up in the component, we need to grab the function we need from the book's context, don't we, to do this. So, I'm going to say const curly braces, and we want the fetch book by ID function. All right? and we set that equal to use books and we invoke it. Right? So now we can use this function down here in the use effect hook to actually fetch the book we need. Now the way we're going to do this is by actually making another function which is async right here. And I'm going to call this function load book. Inside the function I'm going to say const book data is equal to then await. And then we're going to call that function fetchbook by ID. And we'll pass in the ID as an argument. Remember that ID comes from the wrap parameter which we grab up here using the use local search params hook. We did that in the last lesson. Anyway, once we have that book data, which is just a book object, we can update the state by saying set state and then passing in the book data. Then we just need to invoke this function down here so that it gets run when the page first loads. All right. Okay. So cool. Now when we land on this page, we grab the ID from the route and then we run the use effect function which gets that book from app. After that we update the state to be that book object. So now we just need to output that book on the page. So I'm not going to waste your time by writing out all of this template from scratch. It's going to be simple and I'm just going to paste it in for all my course files. But let's quickly go through it. So we have a theme text component for the book title. So we're using that book states and then accessing the title property on it. Same for the author down here, then a spacer, and then we have themed text with a title prop set to true to say the book description. Below that, another spacer with a specific height. And then finally, we output the book description inside themed text. All right. And actually, I think what we need to do is wrap that with a themed card. So, let me just grab all this and delete it and paste it in again. And this time, we've got the themed card. All right. So, that wraps all of these. Okay. So, when I save this, it's probably not going to work, but let's just try this anyway. I'm going to save it and then go to a book. Yeah. And we get an error. Now, the reason this doesn't work is because when we first load the app and come to a details page, the book state is null to begin with until we fetch that book from the database. And so, React is trying to render the page template with all that book data when the book state is null. And that's why we get the error. So, to fix this, we can just add a little if check above where we return the template. And inside this check, we can see if we don't yet have a value. So if not book, if that's true, it means we don't have the book yet. It's still null. And in that case, we can return a loading template instead of this one down here. So let me return inside here. And then for the template, I'm just going to paste in a snippet from the course files. And that is a themed view using the safe area with these container styles. And inside that, we render the loader component that we made earlier in the course. All right. Okay, then. So now when we load this page, if the book's null to begin with, we'll show the loader. Then when the book does load, it rerenders and it shows the book details instead. So we're going to try this in a second, but I thought first of all, I'm just going to paste in a few styles as well to make sure that it looks okay on the screen. So we have one for the title, and that's for this thing over here, the book title, and also for the card itself, just to give it some margin. Going to save this, and then I'm going to head to the profile page. Let's cross our fingers. Click on a book and okay themed loader doesn't exist. Of course it doesn't because we need to import this. So where does that come from? Let's do that down here. We'll change themed card to themed loader and do the same here. Save it again and go to the profile books. Click on one of these. And yeah, that works now. Awesome. So let's try a different one. Brill. So that's now working.