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