DEV Community

Cover image for Ways of Getting Data from API in React

Ways of Getting Data from API in React

Olena Drugalya on April 05, 2021

This blog post is about the ways of getting data from API in React. Before you read this post, you should be familiar with React library and Appli...
Collapse
 
prof3ssorst3v3 profile image
Steve Griffith

Here is a playlist of videos about React that I made for my students - https://www.youtube.com/watch?v=vTFVg6I2wNI&list=PLyuRouwmQCjm1N4jlJ7b3WWjDA8MjfDbg
Hope it helps you learn faster.

Collapse
 
prof3ssorst3v3 profile image
Steve Griffith

I started posting a new YouTube playlist last week about React in 2021 that includes all the newer features of React.

Collapse
 
reedbarger profile image
Reed Barger

Great article!

If any reader is interested in a more in-depth video guide that covers each of these data-fetching strategies, you can check out my post here: reedbarger.com/fetch-data-in-react

Collapse
 
insuusvenerati profile image
Sean

Is the try catch useful for an async api call? If the promise rejects, the catch will not be triggered.

Collapse
 
zer0 profile image
zer0

There is actually situations where using axios, “try/catch” & async/await can cause unwanted behaviour.
At least for me it did.
E.g. when using interceptors a failed request might not end up in catch.

Collapse
 
insuusvenerati profile image
Sean

Nevermind, just read it does actually throw :D

Collapse
 
leandro070 profile image
Leandro Gutierrez • Edited

Great post! I discovered other library very interesting, it's SWR by Vercel :)

Collapse
 
harshhhdev profile image
Harsh Singh

My personal favourite way to handle web requests (post and put) is defintely axios due to it feeling far more intuitive than the others.

Collapse
 
zer0 profile image
zer0

What’s a bit missing In this post is:
In the topic index you mention graphQL (6.) but you only mention it as a side note together with react-query-library.
“ways of fetching data” is a bit confusing to me. Axios and fetch-api are library’s for sending requests. Everything else is ways to structure/time sending requests. A bit confusing in my perspective.

Collapse
 
pavermakov profile image
Pavel Ermakov

How to cancel the request once the component is unmounted?

Collapse
 
olenadrugalya profile image
Olena Drugalya

Why would you need to cancel it? It performed just one time

Collapse
 
pavermakov profile image
Pavel Ermakov

Imagine you are setting state on a successful response. If the component is unmounted before the response is back, you will get an error, something like "Unable to set state on unmounted component"

Thread Thread
 
olenadrugalya profile image
Olena Drugalya

In this case you can introduce a variable to track if the component is unmounted or not. If you use functional component, you can write something like this:
useEffect(() => {
let isMounted = true; // track whether component is mounted

request.get(url)
  .then(result => {
    if (isMounted) {
      setState(result);
    }
  });

return () => {
  // clean up
  isMounted = false;
};
Enter fullscreen mode Exit fullscreen mode

}, []); // only on "didMount"

Collapse
 
sagnikb7 profile image
Sagnik B

replace "reach" with "rich" on the second paragraph. Nice article 😊

Collapse
 
jlrpuma profile image
Jose Luis Rodriguez

Thanks, this post was needed.

Collapse
 
miionu profile image
Rospars Quentin

I never thought about making a custom hook for API calls oO I feel kinda stupid now haha
Thanks for that realization!

Collapse
 
olenadrugalya profile image
Olena Drugalya

You are welcome :)

Collapse
 
johannchopin profile image
johannchopin • Edited

If you need to quickly create a custom REST API for testing the fetch process, I would recommend you to have a look at the restapify library.

Collapse
 
bacchusplateau profile image
Bret Williams

I love articles that present implementations with clear examples and options like you have.

Collapse
 
doabledanny profile image
Danny Adams

Another nice article! I'd never heard of the fetch-hook before, pretty cool :)

Collapse
 
muzammilaalpha profile image
muzammilaalpha

Nice one!

Collapse
 
psyxman profile image
The Man

This post is exactly what I needed for my application. Thank you!

Collapse
 
bc profile image
Brian Canzanella

Nice post, thanks!

Collapse
 
andrewbaisden profile image
Andrew Baisden

Great explanation.

Collapse
 
olenadrugalya profile image
Olena Drugalya

Thank you!

Collapse
 
fahad07_khan profile image
Fahad Khan

I have read this blog and enjoyed it a lot but I have a question,
Which way is the best way for fetching data from backend?
I use Axios for this

Collapse
 
olenadrugalya profile image
Olena Drugalya

There is really no better way :) use what is suitable for your needs. If you ask me, I use Axios just to avoid that extra line of code to transform data to JSON object, but it requires additional import ....most people prefer fetch() because it is already built-in method

Collapse
 
anasbinarif profile image
Anas CH

how to fetch fixed number of data from jsonplaceholder, like I want to only fitch 10 element for my page.

Collapse
 
maltin1234 profile image
maltin

Fantastic post.

 
faiyaz52 profile image
Faiyaz

First learn to why we are using React.Js and learn how create component in React.Js like a Class and functional component in react