kitten.sh
1import React from 'react';
2import { gql, useQuery } from 'urql';
3
4const POKEMONS_QUERY = gql`
5 query Pokemons {
6 pokemons(limit: 10) {
7 id
8 name
9 }
10 }
11`;
12
13const PokemonList = () => {
14 const [result] = useQuery({ query: POKEMONS_QUERY });
15
16 const { data, fetching, error } = result;
17
18 return (
19 <div>
20 {fetching && <p>Loading...</p>}
21
22 {error && <p>Oh no... {error.message}</p>}
23
24 {data && (
25 <ul>
26 {data.pokemons.map(pokemon => (
27 <li key={pokemon.id}>{pokemon.name}</li>
28 ))}
29 </ul>
30 )}
31 </div>
32 );
33};
34
35export default PokemonList;