Refresh State Fetchs Data From Store Again

If you are new to React, and perhaps have only played with edifice to-do and counter apps, yous may not yet take run across a need to pull in information for your app. There will likely come a time when you'll need to practise this, as React apps are near well suited for situations where you're handling both data and country.

The showtime set of data you may need to handle might be hard-coded into your React application, like nosotros did for this demo from our Error Boundary tutorial:

See the Pen fault boundary 0 past Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

What if you want to handle data from an API? That's the purpose of this tutorial. Specifically, we'll make apply of the Fetch API and axios as examples for how to request and utilize data.

The Fetch API

The Fetch API provides an interface for fetching resources. We'll use information technology to fetch information from a tertiary-political party API and see how to use it when fetching information from an API congenital in-house.

Using Fetch with a tertiary-political party API

Run across the Pen React Fetch API Pen 1 by Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

We will exist fetching random users from JSONPlaceholder, a simulated online REST API for testing. Allow's kickoff by creating our component and declaring some default land.

          class App extends React.Component {   state = {     isLoading: true,     users: [],     error: aught   }    render() {     <React.Fragment>     </React.Fragment>   } }        

There is bound to exist a filibuster when data is beingness requested past the network. Information technology could be a few seconds or maybe a few milliseconds. Either way, during this filibuster, it'due south good practice to let users know that something is happening while the asking is processing.

To do that we'll make use of isLoading to either display the loading message or the requested data. The information volition be displayed when isLoading is false, else a loading bulletin will be shown on the screen. So the render() method will look like this:

          render() {   const { isLoading, users, error } = this.country;   return (     <React.Fragment>       <h1>Random User</h1>       // Display a message if we meet an mistake       {error ? <p>{error.message}</p> : nil}       // Hither's our data check       {!isLoading ? (         users.map(user => {           const { username, proper name, email } = user;           return (             <div cardinal={username}>               <p>Proper name: {name}</p>               <p>Electronic mail Address: {email}</p>               <60 minutes />             </div>           );         })       // If there is a filibuster in data, let's let the user know it'southward loading       ) : (         <h3>Loading...</h3>       )}     </React.Fragment>   ); }        

The code is basically doing this:

1. De-structures isLoading, users and mistake from the application land then we don't have to go on typing this.state.
2. Prints a message if the application encounters an mistake establishing a connection
3. Checks to run into if information is loading
4. If loading is not happening, then we must have the information, and so nosotros brandish information technology
5. If loading is happening, and so we must still be working on information technology and display "Loading…" while the app is working

For Steps 3-five to work, we need to brand the request to fetch data from an API. This is where the JSONplaceholder API will come up in handy for our instance.

          fetchUsers() {   // Where nosotros're fetching data from   fetch(`https://jsonplaceholder.typicode.com/users`)     // We get the API response and receive data in JSON format...     .then(response => response.json())     // ...then we update the users state     .then(data =>       this.setState({         users: data,         isLoading: false,       })     )     // Catch any errors we hitting and update the app     .take hold of(error => this.setState({ error, isLoading: simulated })); }        

We create a method called fetchUser() and use it to do exactly what you might think: request user data from the API endpoint and fetch it for our app. Fetch is a promise-based API which returns a response object. So, we make utilize of the json() method to go the response object which is stored in data and used to update the state of users in our application. We also need to alter the state of isLoading to false and then that our awarding knows that loading has completed and all is clear to return the information.

The fact that Fetch is promise-based means nosotros tin can too catch errors using the .grab() method. Any error encountered is used a value to update our fault's country. Handy!

The showtime time the application renders, the data won't have been received — it can take seconds. We want to trigger the method to fetch the users when the application land tin exist accessed for an update and the application re-rendered. React's componentDidMount() is the all-time place for this, so nosotros'll place the fetchUsers() method in it.

          componentDidMount() {   this.fetchUsers(); }        

Using Fetch With Self-Owned API

So far, we've looked at how to put someone else's data to use in an application. But what if we're working with our own data in our own API? That'south what we're going to cover correct now.

See the Pen React Fetch API Pen 2 past Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

I built an API which is bachelor on GitHub. The JSON response you get has been placed on AWS — that's what we will utilise for this tutorial.

As we did before, allow'south create our component and set upwardly some default country.

          class App extends React.Component {   state = {     isLoading: true,     posts: [],     mistake: aught   }    render() {     <React.Fragment>     </React.Fragment>   } }        

Our method for looping through the data will be dissimilar from the ane we used earlier merely only considering of the information's structure, which is going to be dissimilar. Y'all can run into the difference between our data construction here and the one we obtained from JSONPlaceholder.

Here is how the render() method will look like for our API:

          render() {   const { isLoading, posts, error } = this.country;   render (     <React.Fragment>       <h1>React Fetch - Blog</h1>       <hr />       {!isLoading ? Object.keys(posts).map(central => <Post key={primal} body={posts[key]} />) : <h3>Loading...</h3>}     </React.Fragment>   ); }        

Let'south break downwardly the logic

          {   !isLoading ?    Object.keys(posts).map(fundamental => <Post key={cardinal} trunk={posts[primal]} />)    : <h3>Loading...</h3> }        

When isLoading is not truthful, we return an array, map through it and pass the information to the Mail service component equally props. Otherwise, nosotros brandish a "Loading…" message while the application is at work. Very like to before.

The method to fetch posts will expect like the ane used in the first office.

          fetchPosts() {   // The API where we're fetching data from   fetch(`https://s3-usa-w-ii.amazonaws.com/s.cdpn.io/three/posts.json`)     // We get a response and receive the information in JSON format...     .and then(response => response.json())     // ...and so we update the state of our application     .then(       data =>         this.setState({           posts: data,           isLoading: false,         })     )     // If we grab errors instead of a response, let'due south update the app     .take hold of(error => this.setState({ error, isLoading: false })); }        

Now nosotros tin can call the fetchPosts method inside a componentDidMount() method

          componentDidMount() {   this.fetchPosts(); }        

In the Post component, we map through the props we received and render the title and content for each post:

          const Postal service = ({ body }) => {   return (     <div>       {body.map(postal service => {         const { _id, title, content } = post;         return (           <div central={_id}>             <h2>{championship}</h2>             <p>{content}</p>             <60 minutes />           </div>         );       })}     </div>   ); };        

At that place we accept it! At present nosotros know how to use the Fetch API to request data from dissimilar sources and put it to utilise in an application. High fives. ✋

axios

OK, so we've spent a good amount of time looking at the Fetch API and now we're going to turn our attention to axios.

Similar the Fetch API, axios is a way we tin can make a request for information to use in our application. Where axios shines is how it allows y'all to send an asynchronous request to Residuum endpoints. This comes in handy when working with the REST API in a React project, say a headless WordPress CMS.

There's ongoing debate virtually whether Fetch is amend than axios and vice versa. We're not going to swoop into that here because, well, you can pick the right tool for the right job. If you're curious nearly the points from each side, you can read here and hither.

Using axios with a third-party API

See the Pen React Axios i Pen by Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

Similar we did with the Fetch API, let'southward start past requesting data from an API. For this one, nosotros'll fetch random users from the Random User API.

First, we create the App component similar nosotros've done information technology each fourth dimension earlier:

          class App extends React.Component {   state = {     users: [],     isLoading: true,     errors: null   };    render() {     return (       <React.Fragment>       </React.Fragment>     );   } }        

The idea is yet the aforementioned: check to see if loading is in process and either render the data nosotros go dorsum or permit the user know things are still loading.

To make the request to the API, we'll need to create a function. Nosotros'll call the function getUsers(). Inside it, nosotros'll make the request to the API using axios. Let'south see how that looks like earlier explaining further.

          getUsers() {   // We're using axios instead of Fetch   axios     // The API nosotros're requesting information from     .become("https://randomuser.me/api/?results=5")     // Once we become a response, we'll map the API endpoints to our props     .then(response =>       response.data.results.map(user => ({         name: `${user.name.get-go} ${user.name.last}`,         username: `${user.login.username}`,         email: `${user.email}`,         image: `${user.pic.thumbnail}`       }))     )     // Let'southward make sure to change the loading state to brandish the data     .then(users => {       this.setState({         users,         isLoading: fake       });     })     // We tin nonetheless use the `.catch()` method since axios is hope-based     .grab(error => this.setState({ fault, isLoading: false })); }        

Quite unlike from the Fetch examples, right? The bones construction is actually pretty similar, but at present nosotros're in the business of mapping data between endpoints.

The Get asking is passed from the API URL every bit a parameter. The response nosotros become from the API contains an object called data and that contains other objects. The information we want is available in information.results, which is an array of objects containing the data of individual users.

Here nosotros go again with calling our method inside of the componentDidMount() method:

          componentDidMount() {   this.getUsers(); }        

Alternatively, y'all tin can do this instead and basically combine these first ii steps:

          componentDidMount() {   axios     .get("https://randomuser.me/api/?results=5")     .so(response =>       response.data.results.map(user => ({         name: `${user.name.offset} ${user.name.last}`,         username: `${user.login.username}`,         electronic mail: `${user.email}`,         paradigm: `${user.picture.thumbnail}`       }))     )     .and so(users => {       this.setState({         users,         isLoading: imitation       });     })     .catch(error => this.setState({ error, isLoading: imitation })); }        

If y'all are coding locally from your automobile, you can temporarily edit the getUsers() function to await like this:

          getUsers() {   axios     .get("https://randomuser.me/api/?results=five")     .then(response => panel.log(response))     .take hold of(error => this.setState({ fault, isLoading: false })); }        

Your console should get something similar to this:

Nosotros map through the results array to obtain the data we demand for each user. The array of users is then used to set a new value for our users state. With that done, we can then change the value of isLoading.

Past default, isLoading is set to true. When the state of users is updated, we want to change the value of isLoading to false since this is the cue our app is looking for to brand the switch from "Loading…" to rendered information.

          render() {   const { isLoading, users } = this.country;   return (     <React.Fragment>       <h2>Random User</h2>       <div>         {!isLoading ? (           users.map(user => {             const { username, proper noun, e-mail, image } = user;             return (               <div fundamental={username}>                 <p>{name}</p>                 <div>                   <img src={prototype} alt={proper name} />                 </div>                 <p>{email}</p>                 <60 minutes />               </div>             );           })         ) : (           <p>Loading...</p>         )}       </div>     </React.Fragment>   ); }        

If you log the users country to the panel, yous will see that it is an array of objects:

The empty assortment shows the value before the data was obtained. The returned data contains only the name, username, email address and image of individual users because those are the endpoints we mapped out. There is a lot more than data available from the API, of course, merely we'd accept to add those to our getUsers method.

Using axios with your own API

See the Pen React Axios 2 Pen by Kingsley Silas Chijioke (@kinsomicrote) on CodePen.

You take seen how to use axios with a 3rd-party API but nosotros can look at what it's like to request information from our own API, merely like we did with the Fetch API. In fact, let's use same JSON file we used for Fetch so we tin see the difference between the 2 approaches.

Here is everything put together:

          class App extends React.Component {   // Country will apply to the posts object which is set to loading by default   state = {     posts: [],     isLoading: truthful,     errors: zilch   };   // At present nosotros're going to make a asking for data using axios   getPosts() {     axios       // This is where the data is hosted       .go("https://s3-u.s.a.-west-two.amazonaws.com/s.cdpn.io/iii/posts.json")       // One time we go a response and store data, let'southward change the loading state       .then(response => {         this.setState({           posts: response.data.posts,           isLoading: false         });       })       // If we catch whatsoever errors connecting, let's update appropriately       .catch(error => this.setState({ error, isLoading: false }));   }   // Let's our app know we're set to render the data   componentDidMount() {     this.getPosts();   }   // Putting that data to utilise   render() {     const { isLoading, posts } = this.state;     return (       <React.Fragment>         <h2>Random Postal service</h2>         <div>           {!isLoading ? (             posts.map(post => {               const { _id, championship, content } = post;               return (                 <div key={_id}>                   <h2>{championship}</h2>                   <p>{content}</p>                   <hr />                 </div>               );             })           ) : (             <p>Loading...</p>           )}         </div>       </React.Fragment>     );   } }        

The master divergence betwixt this method and using axios to fetch from a 3rd-political party is how the data is formatted. We're getting straight-up JSON this way rather than mapping endpoints.

The posts data we get from the API is used to update the value of the component'southward posts state. With this, we tin can map through the array of posts in return(). We and so obtain the id, title and content of each post using ES6 de-structuring, which is and then rendered to the user.

Similar we did earlier, what is displayed depends on the value of isLoading. When we set up a new land for posts using the information obtained from the API, we had to set a new state for isLoading, too. And then we can finally allow the user know data is loading or render the data we've received.

async and await

Some other affair the promise-based nate of axios allows us to practice is accept advantage of is async and await . Using this, the getPosts() function will look like this.

          async getPosts() {   const response = await axios.get("https://s3-us-west-two.amazonaws.com/s.cdpn.io/three/posts.json");   endeavor {     this.setState({       posts: response.data.posts,       isLoading: false     });   } catch (mistake) {     this.setState({ error, isLoading: false });   } }        

Base case

With axios, it'due south possible to create a base case where we drop in the URL for our API similar and then:

          const api = axios.create({   baseURL: "https://s3-united states of america-west-2.amazonaws.com/south.cdpn.io/three/posts.json" });        

…then make utilize of information technology like this:

          async getPosts() {   const response = await api.become();   try {     this.setState({       posts: response.information.posts,       isLoading: imitation     });   } catch (error) {     this.setState({ error, isLoading: imitation });   } }        

Only a nice way of abstracting the API URL.

Now, data all the things!

Every bit you lot build React applications, y'all will run into lots of scenarios where y'all want to handle data from an API. Hopefully you know experience armed and ready to roll with information from a multifariousness of sources with options for how to request it.

Desire to play with more data? Sarah recently wrote up the steps for creating your own serverless API from a list of public APIs.

hueydreir1961.blogspot.com

Source: https://css-tricks.com/using-data-in-react-with-the-fetch-api-and-axios/