How To Call An API Within A React.js App
A common requirement on any project is to call an API and then display that data on your website. This sounds simple enough, however, the out-of-the box fetch can not be guaranteed to work on all devices most projects will use a third-party package to fetch data from an API. If you do a simple Google search you will quickly see that there are many packages that allow you to do this. In this tutorial, I will compare three of the most widely used packages for fetching data from an API, cross-fetch, isomorphic-fetch, isomorphic-unfetch and Axios. After reading this article you should have a clear picture as to which package you should use.
cross-fetch is the package that I have been using extensively on my current project. I work within a team of 30 person team who are building a high-transaction e-commerce website build using a react frontend and a node backend. The benefit of using cross-fetch is that it works across platform, so we could use it within the react components and it works in all browsers and we could use it within node server to make server-side calls. Having code that looks and works the same no matter where you are in the code base is really useful. cross-fetch is not the most widely downloaded package, as this graph but so far cross-fetch has met our needs. The Redux team also recommends cross-fetch and use it extensively in their documentation.
If you are wondering why the team didn't decide to use 'isomorphic-fetch' - which is a more popular package - then another feature the team liked is that cross-fetch uses a ponyfill rather than a polly-fill. Using a ponyfill means the package doesn't try to change or patch anything, instead the fetch functionality is imported as a normal module so you can use it without affecting other areas in the codebase.
The code to call an API looks like this:
Axios is another package you can use to call an API within React. We can install Axios like so:
Axios is used in a lot of React tutorials you will come across. I like using Axios as it results in pretty clean code, as seen below:
One of the benefits of using Axios is that it provides more functionally than the others, for example it provides the ability to cancel requests which can be useful to use within componentWillUnmount(). The main reason why people tend to not want to use Axios is that the bundle size is a lot larger compared to cross-fetch or isomorphic-fetch. If you work on a high-transaction site then cutting your bundle size down is really important.
As the name implies, isomorphic-fetch works for both node.js and within the browser. isomorphic-fetch is a polyfill module rather than a pony-fill so it is built on top of the fetch polyfill.
To call data with 'isomorphic-fetch' you can write this code:
https://github.com/developit/unfetch/tree/master/packages/isomorphic-unfetch is an alternative isomorphic fetch that works across the browser and node applications. It can be used as either a ponyfill or a polyfill. The package is very bare-bones and comes with a very small bundle size.
This concludes the talk about the different ways of getting data. Hopefully, you should see that some of the tool listed above are more situated to different situations. If you want something light-weight that works across frontend and backend, then cross-fetch is a good choice. If you need something simple, use Axios.