Skip to main content
The Pokemon Summary Adapter converts GraphQL query results into simplified PokemonSummary objects optimized for list views, cards, and filtering operations.

​
adaptPokemonSummary

Converts a single Pokemon entry from a GraphQL response into a summary object. 
adaptPokemonSummary(
  gqlPokemon: GQLPokemonSummaryList['data']['pokemon'][number]
): PokemonSummary

​
Parameters

​
gqlPokemon
object
required
A single Pokemon entry from the GraphQL response containing:
  • id (number): Pokemon ID
  • name (string): Pokemon name
  • pokemontypes (GQLPokemonType[]): Array of type objects with nested type.name

​
Returns

​
result
PokemonSummary
Simplified Pokemon summary object:

​
Usage Example

import { adaptPokemonSummary } from '@/adapters/pokemon-summary.adapter'
import { fetchPokemonListGQL } from '@/lib/api/pokemon.api'

// Fetch data from GraphQL endpoint
const response = await fetchPokemonListGQL()

// Adapt each Pokemon in the list
const pokemonList = response.data.pokemon.map(p => 
  adaptPokemonSummary(p)
)

console.log(pokemonList[24]) 
// {
//   id: 25,
//   name: "pikachu",
//   types: ["electric"],
//   image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/25.png"
// }

​
Data Structure

​
Input (GraphQL Response)

The adapter expects data from a GraphQL query with this structure: 
query {
  pokemon {
    id
    name
    pokemontypes {
      type {
        name
      }
    }
  }
}
Example input: 
{
  id: 25,
  name: "pikachu",
  pokemontypes: [
    { type: { name: "electric" } }
  ]
}

​
Output (PokemonSummary)

The adapter flattens and enhances the data: 
{
  id: 25,
  name: "pikachu",
  types: ["electric"],
  image: "https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/25.png"
}

​
Image URL Generation

The adapter automatically generates sprite image URLs using the Pokemon’s ID: 
image: `https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/${id || 132}.png`
Base URL: https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/
Fallback ID: 132 (Ditto) if ID is missing or null

​
Image URL Examples

  • Pikachu (ID 25): https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/25.png
  • Charizard (ID 6): https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/6.png
  • Mewtwo (ID 150): https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/other/home/150.png

​
Type Transformation

The adapter extracts type names from the nested GraphQL structure: 
const types = pokemontypes.map(t => t.type.name as PokemonSummary['types'][number])

​
Type Examples

Single Type

Input: [{ type: { name: "electric" } }]
Output: ["electric"]

Dual Type

Input: [{ type: { name: "water" } }, { type: { name: "flying" } }]
Output: ["water", "flying"]

​
Use Cases

The PokemonSummary format is ideal for:
Display Pokemon in grid or list layouts without loading full details:
{pokemonList.map(pokemon => (
  <PokemonCard
    key={pokemon.id}
    name={pokemon.name}
    types={pokemon.types}
    image={pokemon.image}
  />
))}
Minimal data structure for localStorage/sessionStorage:
// Store only essential data
localStorage.setItem(
  'favorites',
  JSON.stringify(favoritePokemon) // Array of PokemonSummary
)
Fast initial load with summary data before fetching full details:
// Quick list view
const summaries = await getPokemonListGQL()

// Load details on demand
const details = await getPokemonDetail(pokemon.name)

​
Performance Benefits

Using PokemonSummary instead of PokemonDetail provides significant advantages:
  • Smaller payload: ~100 bytes vs ~2KB per Pokemon
  • Faster parsing: Simple flat structure vs nested objects
  • Reduced memory: Ideal for lists of hundreds of Pokemon
  • GraphQL optimized: Single query returns all needed data

Build docs developers (and LLMs) love

Get started for freeTalk to us