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