kitten.sh
1'use client';
2
3import Link from 'next/link';
4import { Suspense } from 'react';
5import { useQuery, gql } from '@urql/next';
6
7export default function Page() {
8 return (
9 <Suspense>
10 <Pokemons />
11 </Suspense>
12 );
13}
14
15const PokemonsQuery = gql`
16 query {
17 pokemons(limit: 10) {
18 results {
19 id
20 name
21 }
22 }
23 }
24`;
25
26function Pokemons() {
27 const [result] = useQuery({ query: PokemonsQuery });
28 return (
29 <main>
30 <h1>This is rendered as part of SSR</h1>
31 <ul>
32 {result.data
33 ? result.data.pokemons.results.map((x: any) => (
34 <li key={x.id}>{x.name}</li>
35 ))
36 : JSON.stringify(result.error)}
37 </ul>
38 <Suspense>
39 <Pokemon name="bulbasaur" />
40 </Suspense>
41 <Link href="/">RSC</Link>
42 </main>
43 );
44}
45
46const PokemonQuery = gql`
47 query ($name: String!) {
48 pokemon(name: $name) {
49 id
50 name
51 }
52 }
53`;
54
55function Pokemon(props: any) {
56 const [result] = useQuery({
57 query: PokemonQuery,
58 variables: { name: props.name },
59 });
60 return (
61 <div>
62 <h1>{result.data && result.data.pokemon.name}</h1>
63 </div>
64 );
65}