‫So with our React Query client in place,
‫let's now start to use it in order to fetch
‫and manage our cabin data from Supabase.
‫So instead of manually fetching the data in a use effect
‫like we did here, we will now let React Query do this work.
‫So let's remove this.
‫Also, let's remove this image from here.
‫And then now here we will want to display
‫a table of all our cabins.
‫So therefore we have a component right here
‫in our cabins that is called CabinTable.
‫Now, we don't have the actual component here yet,
‫but we have two styled components.
‫And so let's now use these to create a table,
‫and of course, using React Query to fetch the cabins data
‫for that table.
‫So let's create ourselves our new component.
‫For now here, this doesn't really matter.
‫And then let's immediately also import it right here
‫into the cabins page.
‫So let's create ourselves another row,
‫even though this one will only contain
‫the CabinsTable.
‫Or actually, just CabinTable.
‫Then here, we don't need this. We no longer need this.
‫And now we want to import that CabinTable,
‫just like this.
‫And now here we have a problem
‫that we should return only one element.
‫And remember how we said that in our layout,
‫so let's actually check that out because this is important.
‫So in our layout, we want the current page
‫to be directly inside of the main.
‫So all the components should be
‫right inside this main component.
‫That's why we have it here in the AppLayout.
‫And therefore, in each of the pages,
‫we should not return an extra element
‫but really, just return basically all the elements
‫from there separately.
‫So this then here basically creates both the row,
‫and this other row, instead of one big component.
‫So here we will have later on the Filter and Sort.
‫So just to let us know of that already.
‫And so we can close this file
‫and now start working here.
‫And so now it's time to use React Query.
‫So the most important function that we're going to use
‫all the time is called the useQuery custom hook.
‫So useQuery, and now here we need to pass in an object
‫with two things.
‫First, the queryKey.
‫And so this will uniquely identify this data
‫that we're going to query here.
‫So this can be a complex array,
‫or it can just be an array with a string,
‫but it needs to be an array like this.
‫So this cabin is what we will later also see insight
‫or React Query dev tools.
‫And again, this is what identifies each data.
‫And so if later we would useQuery again on another page
‫with this exact key, then the data would be read
‫from the cache as we learned at the beginning.
‫Now, right, and second is the actual query function.
‫And so this is the function which, as the name says,
‫is responsible for actually querying.
‫So basically for fetching the data from the API.
‫Now what's important is that the function
‫that we specify here needs to return a promise.
‫So in the most simple form, we could, for example,
‫use the fetch API here,
‫and then do some request to some URL here.
‫However, this is not what we're going to do.
‫Instead, we will again use the function
‫that we already created.
‫So this getCabins function here is an async function,
‫and therefore it returns a promise.
‫And that promise, when resolved,
‫will return this data here, right?
‫So that's how promises and async/await work.
‫And so this data is standard one
‫that will be stored into the cache.
‫So all we need to do here is to specify that function.
‫So getCabins, and then that's it.
‫Now this, of course, will return something.
‫And so let's start by checking out
‫what that is in our console.
‫And, so we see we already got something.
‫So this object here is the result of that console.log.
‫And so we see that we have the actual data.
‫Nice. So that is working.
‫So we have the data, we have an error string,
‫then we have all other kinds of things.
‫And we also automatically get that isLoading state
‫that I mentioned earlier.
‫And actually in addition to that,
‫we get a bunch of other states,
‫so similar to that.
‫So like isSuccess, or isPaused,
‫or isFetching, or isError,
‫or all of these other ones.
‫Now instead of using these, we could also use the status.
‫So for example, this one is right now at success,
‫but in the beginning it will be at loading, probably.
‫So maybe here we can see that.
‫Well, actually not. This is from earlier.
‫So maybe this one here is the initial one.
‫Yeah, it seems like it is.
‫And so here the status,
‫as I was saying, was initially loading.
‫So we can use this one or we can just use isLoading,
‫which, again, was true at the beginning.
‫So let's then destructure
‫these three important pieces of data.
‫So isLoading, then the data that I usually like to rename.
‫So this case to cabins,
‫and then also the error.
‫Now here, console.log no longer exists,
‫so x no longer exists.
‫And so let's immediately start using the things
‫that we get there from React Query.
‫So we can say that if loading, then return,
‫and now we have something like a spinner.
‫Yeah. So then we want to immediately return this.
‫And this style component is actually pretty interesting
‫because of this animation right here
‫with the keyframes function.
‫So you can check that out,
‫or you can also just use it here.
‫So let's then include that.
‫Import the spinner
‫from App again and then ui,
‫and then Spinner.
‫Alright, and so let's actually test that.
‫And nice.
‫So shortly we saw our spinner,
‫and then here we displayed this table.
‫And so now let's of course display our actual data here.
‫So for that we already have our Table component,
‫and then the TableHeader.
‫So I wrote a bunch of CSS for these already,
‫but what I want to show you the most
‫is that the TableHeader here will be a grid
‫with these six columns.
‫So let's use all of this.
‫So here, the Table component,
‫which will have a TableHeader,
‫and then besides that there will be one cabin row
‫for each of the cabins in our data array.
‫So here we will just have a bunch of divs.
‫So the first one will be for the image.
‫So let's leave that empty.
‫So no description there.
‫Then here the Cabin,
‫then the Capacity,
‫then the Price,
‫then the Discount.
‫And finally, let's leave another empty one here.
‫Alright, so here we are already seeing something.
‫Let's just give this element here
‫the role of a row,
‫and this one the role of a table.
‫So this is just to make the HTML a bit more accessible,
‫because this will actually function as a table,
‫but we do implement it not using the table HTML element,
‫but instead using divs and this header here.
‫But by specifying the role,
‫we then make sure that the browser knows
‫that this actually should be a table and a row.
‫But anyway, let's now then loop
‫over the cabins array, as always.
‫And then for each of them, let's include one cabin row.
‫So let's first come here, because again,
‫here we already only have some style components.
‫And so let's first create that component.
‫So creating it and exporting it
‫so that here we can then import it.
‫So one cabin row, and then as a prop,
‫we will accept the cabin that we want to render.
‫And as a key, as always, cabin.id.
‫All right, and so here we get one row
‫because we only have one cabin in our table on Supabase.
‫So let's accept our cabin prop here.
‫And then let's see what we have.
‫So we have a table row,
‫and then we have basically one element
‫for each of the things that we want to render.
‫So TableRow.
‫And again, let's specify the row as a row here.
‫And then, let's simply use everything that we have.
‫So the image with a source of,
‫well, now I don't really remember the data.
‫But luckily for us, we can go check out our dev tools.
‫So that we haven't done yet.
‫And so here, as we installed in the previous lecture,
‫we have the React Query dev tools.
‫And so now here we have that cabin data.
‫And notice how this is exactly the query key
‫that we specified earlier.
‫So we can click there.
‫And then down here we actually have our data.
‫So this is an array.
‫And so here we then see all the data that we have.
‫So this is really, really useful
‫when we are developing with React Query.
‫So let's do this again.
‫So now we know that it's called cabin.image.
‫And actually, why not destructure this whole thing?
‫So actually let's use the name, the maxCapacity,
‫the regularPrice,
‫discount, and image.
‫So all that we take from the cabin prop.
‫And so here, all we need to specify is the image.
‫All right, and nice. There it is.
‫It's really small, but I think that will change
‫if the page is a bit bigger,
‫or once we add more elements here.
‫So next we have the Cabin component,
‫which will just contain the name.
‫And here we actually have this other font family.
‫Next up, here we just need a div
‫because this doesn't have any special styling.
‫And let's keep going.
‫Here we have an element for the Price.
‫So let's use our formatCurrency,
‫which is not importing automatically,
‫but we'll do that in a minute.
‫And then let's do something similar
‫with the Discount element.
‫And then here we format the discount.
‫And then finally here, we want a button to delete.
‫Later, we will use an icon here,
‫but for now, let's do it like this,
‫and let's import the formatCurrency function.
‫And, ah yeah, right.
‫So let's come here to this file,
‫so to our utilities.
‫And here, these helper functions, one of them,
‫or actually I think some of them
‫use this date functions library that I mentioned
‫in the beginning when we first planned our project.
‫So this is a very popular library for manipulating
‫and for doing calculations with dates.
‫So let's quickly go ahead and install that.
‫So date, fns for functions.
‫And if we later need this ourselves,
‫then we can also open up the documentation here as always.
‫So this really contains a ton of helper functions,
‫this library, and it's really a great way
‫of abstracting away the difficulties
‫of working with JavaScript dates.
‫Now, here we still have some problem,
‫even though we correctly installed it.
‫Or actually we didn't, or at least I didn't.
‫So it should be called date fns and not data.
‫So I will actually uninstall this,
‫which we can do using this command here.
‫And then, so date fns.
‫Let's try that again, and nice.
‫And if this was a bit larger,
‫then the whole thing would also look a lot better.
‫Great.
‫Let's just give ourselves another cabin here.
‫So let's call this one 002, for four people,
‫400 euros, let's say, 75 discount.
‫Let's save it. We don't need any image here.
‫And then if we reload,
‫then indeed we get our second one.
‫Now, okay.
‫Now, up until this point,
‫all of this is really nothing not so new.
‫So everything works here in the exact same way as before,
‫even though we simplified our code a bit.
‫But yeah, here it seems that everything is the same.
‫However, watch what happens if I go now to another page,
‫so if I move away from this component
‫which has therefore unmounted.
‫So now we can see that our state here
‫so that this cabin data is inactive.
‫But watch what happens if I go back here.
‫So here is the same data again,
‫and we didn't have to do any new fetch request.
‫So there wasn't a loading spinner this time,
‫because we already had the data from before.
‫Now of course, if we loaded the page here first,
‫then we don't have the cabin's data yet.
‫And as we move here, it first needs to be fetched.
‫And so then we get that loading spinner,
‫and the data gets stored in our cache.
‫Then again, as we move away the component amounts
‫but the data stays in our cache.
‫So traditionally, if we were doing it
‫using a use effect hook,
‫then as soon as we moved back to the page,
‫the use effect hook would then fetch the data again.
‫But here again, the data is already there.
‫It's still in our cache.
‫Now after some time, notice how the color here changed
‫from green and fresh to stale.
‫So this stale basically means inside React Query
‫that the data is now old so that it's basically invalid.
‫And so therefore when we do certain things,
‫it will now automatically re-fetch the data.
‫So just as we learned in the first lecture of the section.
‫And one of the things that we can do,
‫which will then trigger a re-fetch,
‫is to move away from this browser tab
‫and then come back to it later.
‫So that will trigger a re-fetch
‫as soon as the data is stale.
‫So let's try to go to Supabase here.
‫So go to another tab, and then let's change something.
‫So let's change the price here to 500,
‫or maybe let's change the discount to something else.
‫And so that will then simulate that scenario
‫where some other user of the application changes something.
‫And so then all the applications running
‫on other browsers will come out of sync.
‫And so React Query prevents that
‫from automatically re fetching the data.
‫So let's change this here to 200.
‫And so as we come back here,
‫notice how it will automatically re-fetch.
‫So notice that it quickly changed here to 200.
‫All right, now at this point, the data is still fresh.
‫And so if we go here now and then come back,
‫it will not immediately re-fetch the page.
‫Now we can't really see that
‫because we didn't change anything,
‫but let's change it to 100.
‫So again, in this case, it didn't automatically re-fetch yet
‫because the data is still fresh.
‫And the time that it takes until the data becomes old,
‫so until it becomes stale,
‫is exactly that stale time that we defined
‫in the previous lecture.
‫So this value right here, this one minute that we set
‫is the time that it takes for this data,
‫as I just said, to become stale.
‫So now that happened, that one minute has passed.
‫And so as soon as I leave, for example,
‫I can go to another browser tab or also just here.
‫And then as I come back here,
‫it will move from stale to fetching and then to fresh.
‫So now we are back to that $100 there.
‫So again, it is defined by this time right here
‫how long it takes for the data to become stale.
‫So here we can define that, and actually let's change it.
‫So let's leave that there just as a reference
‫and let's set a to 0.
‫And so what this means is that now the data
‫will always automatically become stale.
‫So now the data is always invalid.
‫So as soon as something here changes and we come back,
‫it will immediately then re-fetch that.
‫And so let's actually leave this value of 0
‫as the stale time.
‫Great. So this is really, really amazing.
‫All the functionality that we so easily
‫get out of the box with React Query.
‫And we will keep exploring all of this here
‫throughout this section
‫and throughout the rest of the project.
‫But with this, you already got a taste
‫of how powerful this library really is.
‫And in the next lecture, we will make it even more powerful
‫by doing mutations,
‫so by basically changing the data that is on the server.