Pega GraphQL SDL, obtén tipos TypeScript listos
Tienes una SDL de un backend y necesitas tipos TypeScript en el cliente. Sin configurar Apollo Codegen, sin fichero de config, sin plugins de CI. Pega el schema a la izquierda, obtén un `schema.types.ts` listo a la derecha, copia o descarga, mételo en tu proyecto.
El generador recorre el AST del schema parseado (usamos el paquete oficial `graphql`, el mismo que Apollo y Yoga usan), así que entiende cada construcción: `type`, `interface`, `enum`, `union`, `input`, `scalar` y nullable vs non-null !. Las listas se envuelven en `Array<T>`, los input type reciben su propio interface TS (mantenemos el estilo de nombre `UserInput` para que no colisione con `User`).
Todo corre en Node en tu lado (un route handler de Next.js) y el schema nunca sale de tu infraestructura hacia ningún tercero.
Cómo usarlo
- Pega GraphQL SDL en el panel izquierdo. El ejemplo por defecto incluye un `type User`, un `input UserInput` y un `enum Status` para que veas la forma de la salida inmediatamente.
- Elige `interface` sobre `type`. `interface` está más cerca de cómo los equipos escriben tipos a mano, soporta declaration merging y `extends`. `type` es mejor para schemas con muchas unions o tipos mapeados.
- Activa "JSDoc desde descripciones" si tu schema tiene `"""descripción de campo"""` encima de los campos. El generador las reescribe como JSDoc encima del TS, así tu IDE muestra tooltips al pasar el ratón.
- Elige un estilo nullable: `T | null` (el más legible, sin imports) o `Maybe<T>` (un alias helper, coincide con Apollo Codegen). El scalar map funciona igual para ambos.
- Activa "Connection / Edge / PageInfo" si tu schema usa el patrón de paginación Relay. El generador añade genéricos `Connection<T>`, `Edge<T>` y `PageInfo` al principio del fichero.
- Edita el scalar map para mapear tus scalar personalizados: `DateTime -> string` (lo más común, el servidor devuelve ISO 8601), o `Date -> Date` si el cliente deserializa, `JSON -> Record<string, unknown>`, `BigInt -> string` (más seguro que `bigint` con JSON).
- Pulsa "Copiar" para poner el resultado en tu portapapeles o "Descargar" para guardarlo como `schema.types.ts`. Pégalo en tu proyecto, importa los tipos, listo.
Cuándo es útil
Cinco situaciones donde este generador te ahorra una hora de setup de codegen:
- Proyecto pequeño, no quieres Apollo Codegen. Apollo Codegen / GraphQL Code Generator son potentes pero requieren ficheros de config, modo watch e instalaciones de plugin. Para 20 tipos de un schema Hasura o PostGraphile es más simple pegar el SDL aquí una vez, generar, soltar en `types.ts` y seguir.
- Adoptar una API GraphQL pública (GitHub, Shopify, Stripe). Coges el schema de introspección vía `graphql-cli get-schema`, pegas el SDL, obtienes los tipos cliente al instante. Sin conectar su pipeline a tu CI.
- Migrar de REST a GraphQL y ya tienes tipos REST con los que no quieres chocar. El generador emite `UserInput` como tipo separado (no sobrescribe `User`), así que puedes mantener ambos en un fichero sin colisiones.
- Documentar el schema para el equipo frontend. Los ingenieros frontend no quieren aprender GraphQL SDL. Pega el schema aquí, envía el TS generado: el otro equipo ve los mismos tipos que el backend, pero en el lenguaje que conocen.
- Construir mocks de test. Las interfaces emitidas aquí son ideales para `Factory<User>` en `vitest` / `jest`: mockeas respuestas de servidor, el compilador comprueba que no has olvidado un campo.
Para APIs REST la herramienta correspondiente es OpenAPI a TypeScript. Para muestras JSON puntuales sin schema, JSON a TypeScript es más rápido.