kitten.sh
1import React from 'react';
2import { gql, useQuery } from 'urql';
3
4const SecondVerseFragment = gql`
5 fragment secondVerseFields on Song {
6 secondVerse
7 }
8`;
9
10const SONGS_QUERY = gql`
11 query App_Query {
12 song {
13 firstVerse
14 ...secondVerseFields @defer
15 }
16 alphabet @stream(initialCount: 3) {
17 char
18 }
19 }
20
21 ${SecondVerseFragment}
22`;
23
24const Song = React.memo(function Song({ song }) {
25 return (
26 <section>
27 <p>{song.firstVerse}</p>
28 <p>{song.secondVerse}</p>
29 </section>
30 );
31});
32
33const LocationsList = () => {
34 const [result] = useQuery({
35 query: SONGS_QUERY,
36 });
37
38 const { data } = result;
39
40 return (
41 <div>
42 {data && (
43 <>
44 <Song song={data.song} />
45 {data.alphabet.map(i => (
46 <div key={i.char}>{i.char}</div>
47 ))}
48 </>
49 )}
50 </div>
51 );
52};
53
54export default LocationsList;