kitten.sh
1import { createClient, useQuery } from 'urql';
2import { graphql } from './graphql';
3import { Fields, Pokemon, PokemonFields } from './Pokemon';
4
5const PokemonQuery = graphql(`
6 query Po($id: ID!) {
7 pokemon(id: $id) {
8 id
9 fleeRate
10 ...Pok
11 ...pokemonFields
12 attacks {
13 special {
14 name
15 damage
16 }
17 }
18 weight {
19 minimum
20 maximum
21 }
22 name
23 __typename
24 }
25 pokemons {
26 name
27 maxCP
28 maxHP
29 types
30 fleeRate
31 }
32 }
33`, [PokemonFields, Fields.Pokemon]);
34
35const Pokemons = () => {
36 const [result] = useQuery({
37 query: PokemonQuery,
38 variables: { id: '' }
39 });
40
41 // @ts-expect-error
42 const [sel] = result.data?.pokemons;
43 console.log(sel.fleeRate)
44 const selected = result.data?.pokemons?.at(0)!
45 console.log(result.data?.pokemons?.at(0)?.maxCP)
46 console.log(selected.maxHP)
47 const names = result.data?.pokemons?.map(x => x?.name)
48 console.log(names)
49 const pos = result.data?.pokemons?.map(x => ({ ...x }))
50 console.log(pos && pos[0].types)
51
52 // Works
53 console.log(result.data?.pokemon?.attacks && result.data?.pokemon?.attacks.special && result.data?.pokemon?.attacks.special[0] && result.data?.pokemon?.attacks.special[0].name)
54
55 // Works
56 const { fleeRate } = result.data?.pokemon || {};
57 console.log(fleeRate)
58 // Works
59 const po = result.data?.pokemon;
60
61 // @ts-expect-error
62 const { pokemon: { weight: { minimum } } } = result.data || {};
63 console.log(po?.name, minimum)
64
65 // Works
66 const { pokemon } = result.data || {};
67 console.log(pokemon?.weight?.maximum)
68
69 // @ts-ignore
70 return <Pokemon data={result.data!.pokemon} />;
71}