Okay.
When it comes to front end, you can probably already imagine that we'll make a bunch of requests.
Essentially, we have a server with a bunch of endpoints, so it only makes sense that on the front
end we will utilize it and you can definitely build this application with a built in fetch API, but
it's always my preference to actually use the library by the name of Axios, which just provides the
elegant way.
Of building complex features.
And in order to get started, you want to install the library.
Now, please keep in mind when we're talking about this project, of course, I mean in the client.
You can also use this package on a server.
But in this scenario, of course, if you want to install the package, you need to make sure you first
navigate to the client and then you go with NPM I and Axios.
And after that we want to navigate to main JSX, import the Axios and let's set up the same get request
and right away also set up the custom instance.
Essentially, I just want to showcase what responses we're going to get back and.
What are the first benefits we'll see with Axios?
Of course, if you follow the command where we installed all the packages on the front end, you should
have already packaged in the package Json.
So in my case, I'll right away navigate to main JSX and instead of fetch.
Let's first import the Axios.
Then let's set up the request.
And what's really cool by default, right away Axios turns this into a Json, so we really don't need
to do anything, so I'm just going to go with data, then await and notice something interesting.
So when it comes to the V8, we can also right away use the top level await.
So everything is going to work.
We don't need to set up a function in order to use the async await, just like I showed you on Node.
Well, then we want to go with Axios and the default one is get.
So essentially you can go here and provide the URL, but it's always my preference to be explicit and
provide here that it's going to be a get request.
Now, of course, if we want to go with post, we write here post if we want to go with Patch and hopefully
you see where I'm going with this.
So effectively we get the Axios from Axios and then we can just chain the methods and based on the method,
that's going to be the request that we're sending, whether that's get post patch and the rest of them.
So let's go here with get.
And again, the URL for now is not going to change.
So let me provide it here.
We don't need these lines of code and I simply want to log just so we can see what we're getting back.
So let me save it and notice.
So in here, this giant object right now is what we're getting back from the Axios.
And our actual data is going to be located here in the data property.
So maybe it's a little bit confusing.
So.
Let me just rename it to response.
So that's the response I'm getting back.
And in that response object, I'll have data property, which is an object, and in here I'll have the
message.
So of course, when we're going to be getting the jobs, when we're going to be getting the user and
all that, it's going to be located over here.
And there's tons of other things.
But to tell you honestly, for the most part, we'll just stick with the data and also eventually I'll
show you.
What happens if we have an error and the idea is pretty much the same again, there's going to be a
giant object and we're just going to be looking for specific things in that error response because we'll
use those values to showcase something to the user.
So that should do it for the basic Axios setup.
But before I let you go, I also right away want to set up essentially a custom instance.
Now we can provide tons of things in that custom instance, but in my case I'm just going to go with
base URL.
So what was my idea?
Well, we have right away a proxy.
Correct.
And proxy always is going to point to localhost and then 5100.
Now we can also shorten this URL since I know that all my requests are going to start with API version
one.
Well we can set up the base URL and now we can nicely skip it.
Please keep in mind that of course you can set up tons of things in that custom instance.
But in this project we're only going to have one.
So first we want to navigate to utils.
We want to create a new file.
And in my case, I'm going to call this custom.
Fetch JS.
Then we want to grab that import from Axios.
And in here we just want to go with custom.
Fetch and we want to set it equal to Axios and we want to call create.
So this is going to create the custom instance.
So just like we use Axios to set up the requests, we can now use the custom fetch, but in that create
we'll pass in some additional things and they will be added by default.
So let's say when we start using this custom fetch, it will right away have the base URL and in order
to set up the base URL notice right away I suggest that property.
And as far as the value, like I said, we're going to go with API version one.
Why?
Well, because in a server all our requests start with this one and then after that of course we go
with either jobs users and auth, then we want to export.
Default.
And the custom fetch.
And then back in the main, Yes, I will remove it in a second, but I still want to showcase that.
Of course everything works and therefore I will remove this Axios one.
Let me try to use auto import.
And then instead of API version one.
Let's just take this one out.
We still need to use a weight, of course.
And as far as the methods, it's going to be the same deal.
So we still use, again, the get post patch and all that.
And the default one is going to be get, but I still like to use it.
And then remember we have the base URL, so we don't need this API version one.
So all throughout.
The upcoming videos, I'll use this one.
The custom fetch.
And essentially, if everything is correct, I should have the same response in the console.
And with this in place, we can move on to the next step.
And before we do that, let me just remove it again.
This was just for demonstration purposes.
We're not going to use it here in the app.
JS.