kitten.sh
1import React from 'react';
2import { gql, useQuery, useSubscription } from 'urql';
3
4const LIST_QUERY = gql`
5 query List_Query {
6 list {
7 char
8 }
9 }
10`;
11
12const SONG_SUBSCRIPTION = gql`
13 subscription App_Subscription {
14 alphabet {
15 char
16 }
17 }
18`;
19
20const ListQuery = () => {
21 const [listResult] = useQuery({
22 query: LIST_QUERY,
23 });
24 return (
25 <div>
26 <h3>List</h3>
27 {listResult?.data?.list.map(i => (
28 <div key={i.char}>{i.char}</div>
29 ))}
30 </div>
31 );
32};
33
34const SongSubscription = () => {
35 const [songsResult] = useSubscription(
36 { query: SONG_SUBSCRIPTION },
37 (prev = [], data) => [...prev, data.alphabet]
38 );
39
40 return (
41 <div>
42 <h3>Song</h3>
43 {songsResult?.data?.map(i => (
44 <div key={i.char}>{i.char}</div>
45 ))}
46 </div>
47 );
48};
49
50const LocationsList = () => {
51 return (
52 <>
53 <ListQuery />
54 <SongSubscription />
55 </>
56 );
57};
58
59export default LocationsList;