Mirror: TypeScript LSP plugin that finds GraphQL documents in your code and provides diagnostics, auto-complete and hover-information.
at main 714 B view raw
1import { FragmentOf, graphql, readFragment } from './graphql'; 2 3export const Fields = { Pokemon: graphql(` 4 fragment Pok on Pokemon { 5 resistant 6 types 7 }`) 8} 9 10export const PokemonFields = graphql(/* GraphQL */` 11 fragment pokemonFields on Pokemon { 12 name 13 weight { 14 minimum 15 } 16 } 17`); 18 19interface Props { 20 data: (FragmentOf<typeof PokemonFields> & FragmentOf<typeof Fields.Pokemon>) | null; 21} 22 23export const Pokemon = ({ data }: Props) => { 24 const pokemon = readFragment(PokemonFields, data); 25 const resistant = readFragment(Fields.Pokemon, data); 26 if (!pokemon || !resistant) { 27 return null; 28 } 29 30 return ( 31 <li> 32 {pokemon.name} 33 {resistant.resistant} 34 </li> 35 ); 36};