The next thing you have to do inside of our search screen component is add in the ability to make a
request to the Yelp API.
Anytime we want to make a network request from React Native application we have a couple of different
options.
But I want to really focus on two.
So these are two things we can use to make a network request from a react native app.
The first is fetch fetches a built in function which means that we essentially don't have to install
any additional libraries to make use of it.
We can just add in a call to the fetch function anywhere inside of our code like so.
And that's pretty much it.
Now the downside to fetch is that error handling with it is just a little bit strange.
And in general if we're going to use fetch it requires us to write a lot of additional code to make
it work in kind of a sensible fashion that makes a lot of sense in a application like the one we are
building.
So we can definitely use fetch.
However we just have to write a good amount of additional code.
The other option that we have is to use a separate library that we have to install into our project
called axioms.
So this really is a separate library which means that we have to install some additional dependency
into our project which therefore means that our application size is going to increase by some amount.
However Acciona is a really easy to use especially compared to fetch and has a lot of sensible defaults
and some really nice features inside of it that allows us to write some pretty reusable code.
So in this course you and I are going to be making use of fetch just because it is a lot easier to use
and it keeps us from having to write a lot of extra wrapper code around it.
Now if you want to use fetch absolutely go for it.
I've had a lot of people in some other courses get a little upset that I make use of axes over fetch
because it is built in.
However once again there are some really good reasons to use axioms over fetch.
So to make use of axes to make a network request we first have to install it as a package.
So I'm going to once again go back over to my terminal.
I'm gonna open up a new terminal window still inside of my food project directory.
Then once inside of here we'll do an npm install.
Excuse me not fetch but axioms like so.
Okay.
So it's a really small package.
So it should be done in just a second or two.
Very good.
So now we can flip back over inside of my search screen.
Well actually not our search screen we're going to actually make a new file that's going to import axioms
and create a pre configured version of it to work specifically with the Yelp API.
So inside of my source directory I'll make a new folder called API and an inside there I'll make a new
file called Yelp dot J.S..
So the idea here is that if we might have multiple different API that we want to work with inside of
our project we will create several different files inside this API directory inside of each one we will
import axioms will then create an instance of axioms and pre configure it to where have it work with
some specific API.
So this is how we very easily get some amount of code reused with axes.
So inside of yellow dot J.S. I'm going to first import axioms from axioms I'll then export default axioms
dot create so we can use axes directly to make a network request.
Alternatively we can make an instance of it that has some preset options assigned.
So like I said this is how we're going to get some amount of code reuse the first option we're going
to set is base you are El and notice that are in L inside there are capitalized the base your old property
is going to be essentially the route you are L that we want to make the request to.
So at this point we should probably go back over to the Yelp API documentation and just get a quick
reminder on some of the different routes we have to make a request to okay.
So back at my documentation here's the documentation for these search the search route.
So if you want to make a request to the search route we need to make a request to API Yelp dot com b
3 businesses slash search and then for looking up information about a very particular business we make
a request to V3 businesses and then the I.D..
So the commonality between both these routes is essentially the HDP s API Yelp.
The three businesses are going to copy that entire portion of the url like so I'll then paste it as
a string for my base your old property.
Now notice that I do not have a board slash at the very end.
There's no slash there.
It just ends with the word businesses.
So now that we set the base you are all property.
If we ever want to make a request to either that search route or to some particular business I.D. we
would just call our Yelp instance which we are going to import into some other file and we would do
a get request and then like search like so.
So this pre configured copy is always going to have the base url tacked on.
So it just saves us having to write out the entire you are L inside that string like so okay.
The other thing that we're going to use this instance right here for those api keys that we generated
just a little bit ago so in order to authorize ourselves with the Yelp API we have to pass in a request
header we can specify a header inside of this instance right here by adding in a headers option put
an object and we'll put in the name of our header the header we want to designate to authorize ourselves
with the Yelp API is authorization and notice how it has a capital A.
If you put in a lowercase say this is not going to work.
So please make sure you get carried away like so then the value for this will be a string of bearer
and then a space and then our API secret.
Immediately after that remember you should have saved your API secret.
Hopefully you did.
If you didn't you can always log back into Yelp and go to the manage app page on this page you'll be
presented with your API key once again.
So we're gonna copy our API key not the client I.D. We want the API key.
And then we'll paste it right after there like so.
Okay.
So at this point time I really got beg you please make sure you have headers.
Make sure you have authorization with a capital A and then make sure you have a string that says bear.
And then one space and then your API key immediately after that if you make a mistake anywhere inside
of here you're going to very quickly see a error.
When we start to make our network request which is obviously just not at all ideal OK.
So that's it for our Yelp API setup.
So now in any component that needs to access the Yelp API we can import this file and immediately access
the Yelp API without having to re designate the base you or L or any authorization headers or anything
like that.
So now that we've got this all put together let's take another pause.
When we come back the next video we're going to start to use this thing from our search screen component.