Making Axios API Calls 📞 to Yelp Fusion inside React.js

Steps to get you set up if you are importing (brunch & breakfast) data with Yelp Fusion API into your react.js web application.

Photo by Brooke Lark on Unsplash

First of all, let me get on the record and say I love APIs. They do wonderful things. However, every #codenewbie will tell you half of the struggles working with APIs is to set up that call function to retrieve information. I ran into this problem last week and spent hours on this so I figured I should offer what I learnt. Oh, if you missed the title, we are going to work with Yelp Fusion v3 API.

Step One: get your authorization key 🔑 from here.

Prior to December 7, 2017 the API used OAuth 2.0 to authenticate requests to the API. In an effort to simplify authentication, starting March 1, 2018 the API no longer uses OAuth 2.0 for requests and moved over to only API Keys.

In your API calls, your key needs to be passed as the header value as Bearer API_KEY insideAuthorization HTTP request. I have mine stored in a .env file so here is what we have sofar:

headers: {
   Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
}

Step Two: choose your end points 🔍.

There are a few endpoints Yelp Fusion offers and the details of each one can be found here. To see the results of each one, like always, Postman is your friend. I used business search endpoints for my project. Small note, if you do want to use the business details and review endpoints, you need to first get the restaurant id with business search.

So the request of my API calls should look like:

axios.get(https://api.yelp.com/v3/businesses/search, {
    headers: {
        Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
   },
})

Step Three: add in the required params 🍳.

For the business search endpoint, a location (string) or latitude (decimal) and longitude (decimal) is sufficient to get your start. A super nice part about this is that the location paras takes almost all types of location information people will type in naturally. This includes, address, neighbourhood, city and postal code. I also put in a value for categories as I am developing a brunch related app.

In my request, I passed in the location result from users.

axios.get(https://api.yelp.com/v3/businesses/search, {
headers: {
   Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
},
params: {
   location: {locationSearched},
   categories: 'breakfast_brunch',
}
})

Let’s also add in promise structure and error handling.

axios.get(https://api.yelp.com/v3/businesses/search, {
   headers: {
     Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
},
   params: {
     location: {locationSearched},
     categories: 'breakfast_brunch',
}
.then((res) => {
 console.log(res)
})
.catch((err) => {
 console.log ('error')
})

Step Four: the catch 🤦🏻‍♀️.

If you run the code above, you will see some wonderful message in your console. It would look something like this:

Image found here

And you guess it right! That’s our friend, CORS saying hello. If you want to read more about CORS, head over here. After searching for answers, I end up using cors-anywhere (thank you so much!). I also passed in my location params inside URL for better performance. So my final code looks like this:

axios.get(`${'https://cors-anywhere.herokuapp.com/'}https://api.yelp.com/v3/businesses/search?location=${locationSearched}`, {
  headers: {
    Authorization: `Bearer ${process.env.REACT_APP_API_KEY}`
},
  params: {
  categories: 'breakfast_brunch',
}
})
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log ('error')
})

Now you can run your creativity to see what you want to do with your shiny new data! I did a brunch spot finder, Github repo here. Words on the street is that I got lazy towards the last hour and it is not responsive….YET!

Until next time, folks 🥰!

Note: this post is written in January 2019. Just like everything on the Internet, there may well be better resources out there already if you are from the further future.

Here are some other places you can find me on the Internet:

I write at-the-moment short blog post (people also call them tweets): https://twitter.com/ChaoyueZ

Wanted to know about my career journey? Head over: https://www.linkedin.com/in/chaoyuezhao/

And of course, you want to know what food I eat: https://www.instagram.com/chaoyue_zhao/?hl=en