kitten.sh
1import { 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 Test = graphql(`
36 query Po($id: ID!) {
37 pokemon(id: $id) {
38 id
39 fleeRate
40 ...Pok
41 ...pokemonFields
42 }
43 }
44`, [])
45
46const Pokemons = () => {
47 const [result] = useQuery({
48 query: PokemonQuery,
49 variables: { id: '' }
50 });
51
52 // @ts-expect-error
53 const [sel] = result.data?.pokemons;
54 console.log(sel.fleeRate)
55 const selected = result.data?.pokemons?.at(0)!
56 console.log(result.data?.pokemons?.at(0)?.maxCP)
57 console.log(selected.maxHP)
58 const names = result.data?.pokemons?.map(x => x?.name)
59 console.log(names)
60 const pos = result.data?.pokemons?.map(x => ({ ...x }))
61 console.log(pos && pos[0].types)
62
63 // Works
64 console.log(result.data?.pokemon?.attacks && result.data?.pokemon?.attacks.special && result.data?.pokemon?.attacks.special[0] && result.data?.pokemon?.attacks.special[0].name)
65
66 // Works
67 const { fleeRate } = result.data?.pokemon || {};
68 console.log(fleeRate)
69 // Works
70 const po = result.data?.pokemon;
71
72 // @ts-expect-error
73 const { pokemon: { weight: { minimum } } } = result.data || {};
74 console.log(po?.name, minimum)
75
76 // Works
77 const { pokemon } = result.data || {};
78 console.log(pokemon?.weight?.maximum)
79
80 // @ts-ignore
81 return <Pokemon data={result.data!.pokemon} />;
82}