‫In a previous lecture, we have done a small change in our column to this place, so nobody is playing
‫it and there, hi there, a butler in this lecture with the handle Harvey are fetching and data.
‫OK, so let's take a look at the current architecture in our yes account.
‫So what we are doing and I use Eickhout count we have here are simply state of venerable fetch.
‫Come through the web.
‫Three will store the account in a statistical area, loaded the component and will return the new state.
‫Well, I'd like to use here is a package called SJW.
‫OK, so a vial or invalidate S.W.O.R.D. from the next US creators and also very creators.
‫It's following their good practices.
‫It's a very nice.
‫It'll fit a very nice to our current architecture.
‫OK?
‫And I am using it a lot in my courses.
‫It's very it's a very good package.
‫So let's take a look at his eyes, open a browser and search here for ah, npm or just a heads up the
‫to find you the package.
‫All right.
‫That's not what I'm looking for as w are, let's say, Jess.
‫OK.
‫So there are three correct hooks for data fetching.
‫So as we are specifying hook functions you can use, you will specify basically the way how you specify
‫the way, how you are affecting data because they're fetching data.
‫It's your custom FOX related function functionality.
‫You can fetch the data from any form, anywhere you can send the API request, you can use the web tree
‫and so on.
‫But I use as the Oracle handler and data in some manner.
‫It will also catch them.
‫So whenever you are making consequential request to end your data, you can return the stale data.
‫So all the data and in the background you can re fetch and then after then your data are effective.
‫You update your current data so you're always displaying your data very reactively and also offers lots
‫of helper functions you can use.
‫You can handle are easily errors.
‫You can easily handle updates of the state, and you don't need to use your state OK to fast, fast,
‫lightweight and reusable built in cache your time experience.
‫And yeah, that's that's what we need.
‫OK, so first of all, the you to inside the right, so let's search your index and installation a very
‫simple npm install NSW.
‫Let's go to terminal.
‫Claire, out, let's copy this.
‫OK, here, a couple of examples how you can use it simply as you are.
‫And then it will put the Fed chair, so the Fed chair does a function from which you will return your
‫date.
‫An official could be anything can be a function to make a request to some.
‫It can be also the function as we are using arbitrary function to fetch the accounts and so on.
‫So it's early.
‫It's going to be anything but a little bit fetching a little conditionality.
‫So conditional data fetching because it won't affect fetch data only event they have about initialized
‫something.
‫We really can make a request.
‫We'll be doing something like this.
‫It'll be making here some ternary operation.
‫We'll check if you have a battery.
‫In that case, they'll be fetching data.
‫We will be providing fetcher.
‫But I'll explain to you, OK?
‫If you want after the lecture, you can just go through these examples.
‫It's not that hard to grasp it that I will show you some examples right now.
‫OK, so back here, back to our terminals and here I will use this package, so let's import here.
‫Use as you are like this and to navigate on it, to handle the state, Adobe done it.
‫We can completely remove the state and into the.
‫What we'll do here.
‫Look, call here.
‫Use as we are.
‫So let's call here.
‫Use as they are like this and to use as W, I will provide a callback function like this from the use,
‫as are.
‫We will get to back out our response, our database so we can collect data.
‫Or rather, let's call it as w our response and is at this as responsible to have, for example, functions
‫properties like data and they will have their will have their error and so on.
‫So all of these we can we can get from as W are OK, so old right here as W are a response.
‫Her response for now.
‫Now what it will do here, I mean, to specify her function that affects your function, it will be
‫which will be responsible for fetching data.
‫But first, we need to provide her identifier of your function.
‫Identifier can be anything it can be entered into.
‫Can be your custom name.
‫Yeah, let's go with the custom name.
‫Since this will be fetching of our archives, we'll of up three accounts accounts here.
‫OK, and the second parameter is zero function.
‫Like this and this function is responsible for fetching data, so simply what you can do here, you
‫can just on here some string, for example, hello world.
‫OK, so under this bankruptcy bill, be run in the budget response here in NSW, the response on the
‫data here you would how you would have Helloworld.
‫So one more time, as are identifiable, the function callback function, which is run in the background
‫and the function is run the data.
‫You will return here.
‫We'll get into SWL response on SWL response.
‫You have a couple of properties your data.
‫Which are data you are returning from a function error in the case, data requested fail or your data
‫are not returned is validating.
‫Can you tell you if you are loading the data so if you if you are making a request?
‫OK.
‫Basically, if it's dysfunctional, execute it and also mutate, mutate, you can mutate your current
‫state for the virus restarting from a SWL response as your data.
‫OK, so we don't want to return here.
‫Hello, world, right?
‫Right.
‫We want to make our basic functionally, we'll likely get hero recounts so from SFX banks so they can
‫get discounts.
‫Pays them here, and we're going to say they are excellent, but we can just return accounts from here.
‫Index of zero.
‫OK, so that's the only thing we need to do here, and I can remember the interiors effect and we have
‫just S.W. our response.
‫Additional thing here is we want to reiterate, we want to call it conditionally because we can call
‫it only when we have an EP three presence or if have EP three, there'll be no here.
‫This would fail.
‫So what we'll do here will have either conditional let's make you home space and live right here.
‫If Vetri or EVAP three is equal to the null, OK, so not equal to the null, or you can just simply
‫search here if you.
‫If you have three, OK, if you have a battery, you can make a request, you can specify your identifier
‫for the function.
‫Otherwise, if you were late down here, you know this function will be executed.
‫OK, so if I have a tree, I can execute this function application of function.
‫In fact, it be executed whenever you will specify here, identify fire, if you will specify here.
‫This function will be executed and your data.
‫You will return from SWL response here.
‫There'll be undefined in that case, so make clear this conditional is very important.
‫If you have that tree, identify otherwise null and then it can function.
‫It can be called.
‫OK, so now, you know, use that fact, we have a little one to set here any account.
‫OK, so what do we want to do here is that we can from our response here.
‫And actually the structure trades a couple of things like the search for this took transmuted function
‫and when you look here, mutate.
‫So let's instead of this, let's call mutate.
‫You're basically you will you will execute its function even later than your data.
‫OK, so use it as WRVA later in the new data of the mutate here.
‫OK, so new account basically.
‫OK, now we can simply return it, so we want to return here.
‫Mutate and we want to provide it under everything because it would like to return in the back to our
‫page or whatever.
‫But there are companies using our outrageous account function so that you like this.
‫I right here mutate and as W are a response like the rest of the SWL response.
‫Or you could just call it here.
‫Rest.
‫OK, and now in the count, I will ride here like this.
‫Curly brackets and I believe on this date as the object.
‫Al-Jazeera, beck mutate and also the rest of their properties are.
‫OK, we can also buy like this if you want.
‫OK.
‫OK, so we are returning the Eickhout, and we are specifying mutate and the arised, and of course,
‫if your breath area can also operate as a one liner, it's not that long, right?
‫So we can have a mutate.
‫It does a little bit of style here, so whatever you prefer since is not such a long line, it's going
‫to be easy here on the one liner.
‫OK, so now let's say we that we need to verify if it's working, of course.
‫Also, this your state, we don't need to have any use state now.
‫One thing, guys.
‫Now your data will be available, your account will be available because your account will be available
‫under the data property of the response you are getting from you as w are.
‫So what you need to do in the Navarra component, how let's get here and on the Echo now will be returning
‫here.
‫That's OK.
‫You return to your account.
‫But remember now on the economy, you will have a data error and so on.
‫So what?
‫You want to return here?
‫And what you need to check here now for will be if you have an account to the data.
‫All right.
‫And if you have economic data, you want this play here.
‫Everybody's playing it count.
‫Actually down here, right, so if you have an account data again here, then display here.
‫Account data.
‫OK, so this way we need to display everything now, OK, because now we have more properties on account.
‫OK.
‫So let's say the guys, let's go back to our browser refresh, and I mean, it was terrible 12 hours
‫forgot after the installation snooping around that and hopefully everything will be working.
‫There is no reason it shouldn't.
‫OK, hold that for a refresh.
‫And actually count is not here.
‫I think something is wrong with our condition here.
‫Let's see how you say count.
‫Actually, I can see that if you hear this a I do see this bracket here, the first parameter should
‫be function actually eligible, the bracket from the ending and wrap it here.
‫Like this and you need to return here.
‫OK.
‫And here a comma like this.
‫So from this first parameter to return, here are either your identifier or the note.
‫In the case you don't have an arbitrary.
‫So you have to return this value otherwise null and then comma here.
‫But it will simplify to shortly after, but save it.
‫Let's go back to our neighbor to the.
‫Perfect.
‫OK, so let's simplify it, so you can simplify it like it is, because able this is a bracket and this
‫bracket live here, comma, and let's remove their return and you can live it without the brackets and
‫this will work the same.
‫OK, so save it, Bekir.
‫Yeah, everything is working amazing.
‫Yeah.
‫Perfect.
‫OK, maybe one more thing they want to be here more explicit, so can they be right here if I three
‫is not equal, the liberty is not equal to the null, then display here it.
‫OK, but I think we are OK with this expression here.
‫OK, so let's take let's test OK says we are here.
‫Let me finish.
‫I will just change your account a couple of times.
‫I will go to account to.
‫It cold one.
‫Yeah.
‫Marking the coldest changing perfect we can look out.
‫Let's look out.
‫Yeah.
‫No, I can't hear.
‫Let's look your connect.
‫Yeah, everything is working.
‫And again, I will try also private windows.
‫Let's go to private window.
‫Look, I'll host three thousand.
‫I would think.
‫And it's limitless.
‫OK, guys, so everything is working just right now, we are functioning in the executive committee
‫and you will be handling the more of things with the decisions as as they are functioning.
‫OK, so that's going to be it from this lecture, and hopefully I will see you in the next one.
‫Cheers, guys.