Make HTTP Requests with React

React>=16.12.0

Share this video with your friends

Most useful React applications involve interacting with a server to load and persist data. To do this on the web, we use HTTP requests with the browser’s built-in fetch API (or you may use some other open source library that’s built on top of this API). HTTP requests like this are inherently asynchronous in nature and they’re also side-effects so we’ll need to manage not only starting the request, but also what we should show the user while the request is “in flight.”

In this lesson we’ll use a public GraphQL server that serves up pokemon data to load information for a given pokemon name. We’ll learn how to fetch that data inside a React.useEffect callback and display the results when the request completes.

Brandon Perfetti

~ 4 years ago

Looks like the pokemon api referenced here is down.

I found something similar JIC anyone else hits the same trouble.

https://github.com/mazipan/graphql-pokeapi

Sample gql query:

query pokemon($name: String!) {
  pokemon(name: $name) {
    id
    name
    abilities {
      ability {
        name
      }
    }
    moves {
      move {
        name
      }
    }
    types {
      type {
        name
      }
    }
    message
    status
  }
}

Martin Moreno

~ 4 years ago

The API in this video no longer seems to be valid. Could you please update? I tried repurposing using https://pokeapi.co/api/v2/pokemon/ and it works but unfortunately only GET methods are allowed.

Iñigo Iparragirre

~ 3 years ago

If the url doesn't work update the fetch url to 'https://graphql-pokemon2.vercel.app'

Luigi Lupini

~ 3 years ago

Updated request.

const pokemonQuery = query PokemonInfo($name: PokemonEnum!) { getPokemon(pokemon: $name) { num species types } };