Wasp Framework

Wasp es un DSL (Domain Specific Language) que compila configuración declarativa en una aplicación full-stack completa.

Conceptos Clave

main.wasp

El archivo main.wasp es la fuente de verdad de la aplicación. Define:

App Config: Nombre, título, auth settings
Routes & Pages: Rutas y paginas de la aplicación
Operations: Queries y Actions (comunicación cliente-servidor)
Entities: Referencias a modelos de Prisma
Jobs: Tareas programadas (cron)
APIs: Endpoints HTTP personalizados

Ejemplo de Estructura

app TalentBricksAI {
  wasp: { versión: "^0.20.0" },
  title: "TalentBricksAI",
  auth: {
    userEntity: User,
    methods: { email: { ... } }
  }
}

// Rutas
route CoursesRoute { path: "/courses", to: CoursesPage }
page CoursesPage { component: import { CoursesPage } from "@src/courses/CoursesPage" }

// Operaciones
query getCourses {
  fn: import { getCourses } from "@src/courses/operations",
  entities: [Course, Lesson]
}

action enrollInCourse {
  fn: import { enrollInCourse } from "@src/courses/operations",
  entities: [Enrollment, User, Course]
}

Entities

Los modelos definidos en schema.prisma automaticamente se convierten en “entities” de Wasp:

model Course {
  id          Int      @id @default(autoincrement())
  title       String
  lessons     Lesson[]
}

// main.wasp - referencia automatica
query getCourses {
  entities: [Course]  // Wasp sabe que Course existe
}

Operations

Queries (Lecturas)

import type { GetCourses } from "wasp/server/operations";
import type { Course } from "wasp/entities";

export const getCourses: GetCourses<void, Course[]> = async (args, context) => {
  return context.entities.Course.findMany({
    where: { isPublished: true },
    include: { lessons: true },
  });
};

import { useQuery, getCourses } from "wasp/client/operations";

export function CoursesPage() {
  const { data: courses, isLoading } = useQuery(getCourses);
  // ...
}

Actions (Escrituras)

import type { EnrollInCourse } from "wasp/server/operations";

export const enrollInCourse: EnrollInCourse<{ courseId: number }, void> = async (
  { courseId },
  context
) => {
  if (!context.user) throw new HttpError(401);

  await context.entities.Enrollment.create({
    data: {
      userId: context.user.id,
      courseId,
    },
  });
};

import { enrollInCourse } from "wasp/client/operations";

async function handleEnroll(courseId: number) {
  await enrollInCourse({ courseId });
}

autenticación

Wasp maneja la autenticación automaticamente:

app TalentBricksAI {
  auth: {
    userEntity: User,
    methods: {
      email: {
        fromField: { name: "TalentBricksAI" },
        emailVerification: { ... },
        passwordReset: { ... }
      }
    }
  }
}

En el cliente:

import { useAuth, logout } from "wasp/client/auth";

function NavBar() {
  const { data: user } = useAuth();

  if (user) {
    return <button onClick={logout}>Cerrar sesión</button>;
  }
  return <Link to="/login">Iniciar sesión</Link>;
}

Reglas de Importación

En archivos TypeScript/React

// Imports de Wasp
import { useQuery } from "wasp/client/operations";
import { useAuth } from "wasp/client/auth";
import type { Course } from "wasp/entities";
import { HttpError } from "wasp/server";

// Imports de Prisma (solo para enums)
import { Difficulty } from "@prisma/client";

// Imports locales - RUTAS RELATIVAS
import { CourseCard } from "./components/CourseCard";

En main.wasp

// SIEMPRE usar @src/ para imports
page CoursesPage {
  component: import { CoursesPage } from "@src/courses/CoursesPage"
}

Generacion de código

Wasp genera código en el directorio .wasp/ (gitignored):

Tipos TypeScript
código de conexión cliente-servidor
configuración de Prisma

Importante: Después de cambiar main.wasp o schema.prisma, reiniciar wasp start para regenerar tipos.