kitten.sh
1import Link from 'next/link';
2import { cacheExchange, createClient, fetchExchange, gql } from '@urql/core';
3import { registerUrql } from '@urql/next/rsc';
4
5const makeClient = () => {
6 return createClient({
7 url: 'https://graphql-pokeapi.graphcdn.app/',
8 exchanges: [cacheExchange, fetchExchange],
9 });
10};
11
12const { getClient } = registerUrql(makeClient);
13
14const PokemonsQuery = gql`
15 query {
16 pokemons(limit: 10) {
17 results {
18 id
19 name
20 }
21 }
22 }
23`;
24
25export default async function Home() {
26 const result = await getClient().query(PokemonsQuery, {});
27 return (
28 <main>
29 <h1>This is rendered as part of an RSC</h1>
30 <ul>
31 {result.data
32 ? result.data.pokemons.results.map((x: any) => (
33 <li key={x.id}>{x.name}</li>
34 ))
35 : JSON.stringify(result.error)}
36 </ul>
37 <Link href="/non-rsc">Non RSC</Link>
38 </main>
39 );
40}