Consumoapi Svelte

# Consumiendo la API de Rick & Morty con SvelteKit , App sencilla

📚 ¿Qué he construido?

He creado mi primera aplicación en SvelteKit que consume una API externa. Concretamente, he trabajado con la Rick and Morty API para crear una galería de personajes con páginas de detalle.

🎯 Conceptos que he aprendido

1. SvelteKit y su sistema de rutas

He descubierto que SvelteKit tiene un sistema de archivos que automáticamente crea las rutas de mi aplicación. Esto significa que:

• src/routes/+page.svelte → Se convierte en la página principal /
• src/routes/character/[id]/+page.svelte → Se convierte en /character/123 (rutas dinámicas)

Como se hace en NextJS

2. El patrón +page.ts + +page.svelte

Una de las cosas más importantes que he aprendido es cómo SvelteKit separa la lógica de carga de datos de la presentación:

En +page.ts:

export const load: PageLoad = async ({ fetch }) => {
    const response = await fetch('https://rickandmortyapi.com/api/character');
    const data = await response.json();
    
    return {
        characters: data.results
    };
}

Aquí es donde pido los datos a la API. Esta función se ejecuta antes de que se renderice la página.

En +page.svelte:

<script>
    let { data } = $props();
</script>

{#each data.characters as char}
    <Card characters={char} />
{/each}

Aquí recibo los datos que preparó el archivo .ts y los muestro. Es como si el .ts fuera el chef que cocina y el .svelte fuera el camarero que sirve el plato.

3. Uso de TypeScript

Definir interfaces:

interface Personaje {
    name: string;
    image: string;
    id: string;
}

Usar tipos en funciones:

export const load: PageLoad = async ({ fetch, params }) => {
    // TypeScript sabe qué contiene 'params' y 'fetch'
}

El tipo PageLoad es proporcionado por SvelteKit y me dice exactamente qué puedo hacer dentro de esta función.

4. Componentes reutilizables: El componente Card.svelte

He creado mi primer componente reutilizable. Esto me permite:

1. Recibir datos desde el componente padre:

   let { characters }: Props = $props();
   

2. Mostrar la información de manera consistente:

   <a href="/character/{characters.id}" class="card">
    <img src={characters.image} alt={characters.name} />
    <h3>{characters.name}</h3>
   </a>
   

3. Reutilizarlo tantas veces como necesite sin duplicar código.

5. Rutas dinámicas con [id]

He aprendido que cuando creo una carpeta con corchetes [id], SvelteKit entiende que es una ruta dinámica, se me ha hecho facil el concepto dado que tambien se hace igual en NEXTJS:

routes/
  character/
    [id]/
      +page.svelte
      +page.ts

Esto me permite:

• Acceder a /character/1, /character/2, etc.
• Obtener el ID desde params.id en mi función load:

export const load: PageLoad = async ({ fetch, params }) => {
    const id = params.id; // ¡El ID viene de la URL!
    const response = await fetch(`https://rickandmortyapi.com/api/character/${id}`);
    // ...
}

6. Manejo de errores

He aprendido a manejar errores con svelte

if (!response.ok) {
    if (response.status === 404) {
        error(404, {
            message: '¡Vaya! Este personaje no existe en este universo. 🌌'
        });
    }
}

Y he creado un archivo +error.svelte que muestra mensajes bonitos cuando algo falla, en lugar de dejar que la aplicación explote.

7. Fetch con superpoderes

El fetch que recibo en SvelteKit no es el fetch normal del navegador. Es una versión mejorada que:

• Funciona tanto en el servidor como en el cliente
• Maneja automáticamente cookies y sesiones
• Es más eficiente para SSR (Server-Side Rendering)

8. La sintaxis de bloques de Svelte

He dominado la sintaxis {#each} de Svelte:

{#each data.characters as char}
    <Card characters={char} />
{/each}

• {# = Apertura de bloque
• /} = Cierre de bloque

Es mucho más limpio que escribir bucles en JavaScript tradicional.

10. Try-Catch para errores inesperados

try {
    const response = await fetch(url);
    // ...
} catch (err: unknown) {
    error(503, {
        message: 'No se pudo conectar con el servidor.'
    });
}

🏗️ Estructura del proyecto

Api-rickandmorty/
├── src/
│   ├── routes/
│   │   ├── +page.svelte          # Página principal con galería
│   │   ├── +page.ts              # Carga datos de todos los personajes
│   │   ├── +error.svelte         # Página de error personalizada
│   │   └── character/
│   │       └── [id]/
│   │           ├── +page.svelte  # Detalle de un personaje
│   │           └── +page.ts      # Carga datos de un personaje específico
│   └── lib/
│       └── Card.svelte           # Componente de tarjeta reutilizable

🔧 Tecnologías utilizadas

• SvelteKit - Framework principal
• TypeScript - Tipado estático
• Vite - Build tool
• Bun - Runtime y gestor de paquetes ultrarrápido
• Rick and Morty API - Fuente de datos

🚀 Cómo ejecutar el proyecto

# Instalar dependencias
bun install

# Modo desarrollo
bun run dev

# Build para producción
bun run build

Nota: Este proyecto forma parte de mi proceso de aprendizaje en desarrollo web con Svelte.