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.

Chao
Chao
Jan 27, 2019 · 3 min read
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: {

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, {

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, {

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

axios.get(https://api.yelp.com/v3/businesses/search, {

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}`, {

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store