kitten.sh
1import React from 'react';
2import { gql, useQuery } from 'urql';
3
4const RANDOM_COLOR_QUERY = gql`
5 query RandomColor {
6 randomColor {
7 name
8 hex
9 }
10 }
11`;
12
13const RandomColorDisplay = () => {
14 const [result] = useQuery({ query: RANDOM_COLOR_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 <div style={{ backgroundColor: data.randomColor.hex }}>
26 {data.randomColor.name}
27 </div>
28 )}
29
30 {result.operation && (
31 <p>
32 To get a result, the retry exchange retried:{' '}
33 {result.operation.context.retryCount || 0} times.
34 </p>
35 )}
36 </div>
37 );
38};
39
40export default RandomColorDisplay;