Wasp Framework

Wasp es un DSL (Domain Specific Language) que compila configuracion declarativa en una aplicacion full-stack completa.

Conceptos Clave

main.wasp

El archivo main.wasp es la fuente de verdad de la aplicacion. Define:

App Config: Nombre, titulo, auth settings
Routes & Pages: Rutas y paginas de la aplicacion
Operations: Queries y Actions (comunicacion cliente-servidor)
Entities: Referencias a modelos de Prisma
Jobs: Tareas programadas (cron)
APIs: Endpoints HTTP personalizados

Ejemplo de Estructura

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

// Rutas
route CoursesRoute { path: "/cursos", 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 });
}

Autenticacion

Wasp maneja la autenticacion 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 Sesion</button>;
  }
  return <Link to="/login">Iniciar Sesion</Link>;
}

Reglas de Importacion

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 Codigo

Wasp genera codigo en el directorio .wasp/ (gitignored):

Tipos TypeScript
Codigo de conexion cliente-servidor
Configuracion de Prisma

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