Fetching the Basket on App Start
In this lesson, we're going to fetch the basket on app start
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the The newline Guide to Fullstack ASP.NET Core and React course and can be unlocked immediately with a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to The newline Guide to Fullstack ASP.NET Core and React with a single-time purchase.
[00:00 - 00:06] In the last lecture, we prepared our store context. We are now ready to use it from anywhere in our application.
[00:07 - 00:19] Let's start from fetching the basket data. Since we are storing our basket data in our database, we can make an API call to fetch the basket data from our server, as soon as our application initializes.
[00:20 - 00:30] And our app.tsx file is the best place to make that call. But if you remember, we can't make an API request without the cookie called client ID.
[00:31 - 00:38] So what we can do is check if we have a client ID in our cookie. If yes, then we will make an API request.
[00:39 - 00:52] Now the question is, how can we fetch the cookie from our browser? Well, our document gives us the access to the cookie, but the tricky part is extracting it from bunch of other cookies stored in the browser.
[00:53 - 01:00] There are plenty of libraries which make it pretty straightforward to extract the cookie. But we can do it without them as well.
[01:01 - 01:08] In the script below, there is a function called get_cookie. Let's paste it inside app.tsx file.
[01:09 - 01:15] First, let's go to our app.tsx file. And there is a function inside the code.
[01:16 - 01:22] Just paste it here. This just takes a string parameter, which is the name of the cookie.
[01:23 - 01:28] It then checks it inside the current cookie. If it finds the name, it returns the value.
[01:29 - 01:37] Otherwise, it returns an empty string. Now let's import the set_pasket method from our use_store_context.
[01:38 - 01:48] So let's write it here. const_set_pasket is equal to use_store_context.
[01:49 - 01:58] And yes, it automatically imports it for us. We will make an API request to get the basket data if we have the cookie.
[01:59 - 02:04] So first of all, we will use the use_effect hook. Let me use it here.
[02:05 - 02:18] Use_effect. And inside will create a const client ID.
[02:19 - 02:28] And check if our get_cookie has it. And we want to pass the name of the cookie, which is again client ID.
[02:29 - 02:39] Now if we have the client ID, which means it's not empty, we will call our agent.basket.get method. So let me create an if statement.
[02:40 - 02:58] If the client ID, we will call agent.baskets.get. And then we want to send the response.
[02:59 - 03:09] And we will set basket to this response. And if there is an error, I can chain it to catch.
[03:10 - 03:23] And console log the error. And as a dependency, I want the set basket.
[03:24 - 03:31] So let me pass it here. Now let's take it a bit further in the next lesson.