Making An External API Call Using Backend In A [React/Rails] App

In my capstone project for the Flatiron School I have made a statistic hub for the video game Overwatch. I had a blast making it while I’m very passionate about the game and play it almost every day.

One of the features of the site is using an API that gives me all the player data down to the smallest statistic. Believe me there are a lot of end points to this API , but I found the one I wanted to use. Now the issue was using it in my application.

My first thought was to just call it with a fetch and keep it on the front end. Which in my mind there was no need for me to do anything in my Rails backend because the API stores all of the data. When I would attempt to call it on my front end no matter what I would always get a CORS error that did not allow cross origin. So after reading up about all of that I realized I do need to set it up onto my back end.

The first step to getting it set up is to add a few gems dotenv & httparty.

The gems allowed me to access the API address when I called handling the environment set up and would keep it on the same port that the rest of my back end now avoiding the CORS error.

Second, I setup a controller with customer controller methods. This file I also require the dotenv gem ,as well as, use the httparty gem for my response. Now my API required three parameters in the URL itself. Those being region , platform , and battletag . Now if the platform is Xbox or PlayStation those would the gamer tags for their respective systems.

To get the setup I needed in my custom controller method I set up the parameters in the URL so I could implement them in my route.

If you thought making the custom routes the next step you would be correct!

Next I go to my routes file and simply write me GET method route that includes the parameters I will make as state variables on my front end to make it a more simple user experience.

Last step! So now that we have our routes and we have the custom controller methods its a walk in the park from here. We want to make the three parameters a state variable so the customer can change it in the GUI based on what they want to search.

After that it is simple in our fetch request we just interpolate the three state variables.

There you have it! You are now able to call the third party API and have it run through your Rails backend. You are also able to have it called on your React front-end. I hope you found this helpful because I sure could have used this blog when I was working on this functionality!