Unfortunately, sometimes a server request fails and we need to display a helpful error message to the user. In this lesson we’ll handle a promise rejection so we can collect that error information, and we’ll also learn how we can best display manage the state of our request so we have a deterministic render method to ensure we always show the user the proper information based on the current state of our React component.
A common mistake people make is to create a state variable called isLoading and set that to true or false. Instead, we’ll be using a status variable which can be set to idle, pending, resolved, or rejected. You can learn more about why this is important from Stop using isLoading booleans.
<body> <div id="root"></div> <script src="https://unpkg.com/react@16.12.0/umd/react.development.js"></script> <script src="https://unpkg.com/react-dom@16.12.0/umd/react-dom.development.js"></script> <script src="https://unpkg.com/@babel/standalone@7.8.3/babel.js"></script> <script type="text/babel"> function PokemonInfo({pokemonName}) { const [status, setStatus] = React.useState('idle') const [pokemon, setPokemon] = React.useState(null) const [error, setError] = React.useState(null) React.useEffect(() => { if (!pokemonName) { return } setStatus('pending') fetchPokemon(pokemonName).then( pokemonData => { setStatus('resolved') setPokemon(pokemonData) }, errorData => { setStatus('rejected') setError(errorData) }, ) }, [pokemonName]) if (status === 'idle') { return 'Submit a pokemon' } if (status === 'rejected') { return 'Oh no...' } if (status === 'pending') { return '...' } if (status === 'resolved') { return <pre>{JSON.stringify(pokemon, null, 2)}</pre> } } function App() { const [pokemonName, setPokemonName] = React.useState('') function handleSubmit(event) { event.preventDefault() setPokemonName(event.target.elements.pokemonName.value) } return ( <div> <form onSubmit={handleSubmit}> <label htmlFor="pokemonName">Pokemon Name</label> <div> <input id="pokemonName" /> <button type="submit">Submit</button> </div> </form> <hr /> <PokemonInfo pokemonName={pokemonName} /> </div> ) } function fetchPokemon(name) { const pokemonQuery = ` query ($name: String) { pokemon(name: $name) { id number name attacks { special { name type damage } } } } ` return window .fetch('https://graphql-pokemon.now.sh', { // learn more about this API here: https://graphql-pokemon.now.sh/ method: 'POST', headers: { 'content-type': 'application/json;charset=UTF-8', }, body: JSON.stringify({ query: pokemonQuery, variables: {name}, }), }) .then(r => r.json()) .then(response => response.data.pokemon) } ReactDOM.render(<App />, document.getElementById('root')) </script> </body>