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