1. 26
    Make HTTP Requests with React
    4m 3s

Make HTTP Requests with React

Kent C. Dodds
InstructorKent C. Dodds

Share this video with your friends

Send Tweet

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
Brandon Perfetti
~ 8 months 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
Martin Moreno
~ 6 months 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.