<script lang="ts">
  /*** IMPORT ------------------------------------------- ***/

  import { createHttpFetcher, lightTheme } from "../../source/library/index.ts";
  import GraphiQL from "../../source/library/GraphiQL.svelte";

  /*** UTILITY ------------------------------------------ ***/

  const fetcher = createHttpFetcher({
    url: "https://graphql.pokeapi.co/v1beta2"
  });

  const initialQuery = `
    query best_grass_poison_pokemons {
      pokemon: pokemon(
        where: {_and: [{pokemontypes: {type: {name: {_eq: "grass"}}}}, {pokemontypes: {type: {name: {_eq: "poison"}}}}]}
        order_by: {pokemonstats_aggregate: {sum: {base_stat: desc}}}
        limit: 3
      ) {
        name
        stats: pokemonstats_aggregate(order_by: {}) {
          aggregate {
            sum {
              base_stat
            }
          }
        }
      }
    }
  `;
</script>

<GraphiQL {fetcher} {initialQuery} theme={lightTheme}/>
