0Pricing
TypeScript Academy · Lección

Seguridad de tipos de extremo a extremo: flujo schema first

Mantenga una única fuente de verdad desde el esquema hasta el cliente.

Seguridad de tipos de extremo a extremo: flujo schema first es una lección gratuita de TypeScript Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de TypeScript Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué es el enfoque schema-first?

Schema-first significa que el esquema de GraphQL es la única fuente de verdad. Los tipos del frontend, los resolvers del backend y los contratos de la API se derivan de él, lo que evita que cualquier capa quede desincronizada.

# The workflow:
# 1. Define schema (.graphql or SDL)
# 2. Generate server resolver types
# 3. Generate client operation types
# 4. Both sides automatically stay in sync

Definir el esquema

Escriba su esquema de GraphQL en SDL (archivos .graphql) y confírmelo en el repositorio como contrato entre el cliente y el servidor.

# schema.graphql
type User {
  id: ID!
  name: String!
  email: String!
}

type Query {
  user(id: ID!): User
}

Servidor: generar tipos de resolvers

Ejecute codegen con el plugin typescript-resolvers para generar firmas de resolvers tipadas a partir del esquema.

# Server codegen step
npx graphql-codegen --config codegen.server.yml

Cliente: generar tipos de operaciones

Ejecute codegen con typescript-operations y los plugins de Apollo/urql para generar hooks tipados a partir de los archivos de operaciones .graphql.

# Client codegen step
npx graphql-codegen --config codegen.client.yml

Detección de cambios incompatibles

Use graphql-inspector para detectar cambios incompatibles en el esquema (eliminación de campos o cambios de tipos) antes de que lleguen a producción.

npx graphql-inspector diff ./api/schema.graphql ./api/schema.new.graphql
# Reports: BREAKING: Field 'User.email' was removed

Registro de esquemas

Un registro de esquemas (Apollo Studio, Hive) almacena las versiones del esquema, realiza un seguimiento de los cambios a lo largo del tiempo y avisa sobre cambios incompatibles en CI.

# Push schema to Apollo Studio:
npx apollo schema:push --endpoint https://api.example.com/graphql

Crear mocks con el esquema

Use el esquema para generar datos simulados durante el desarrollo del cliente sin un servidor real, manteniendo los mocks acordes con el esquema.

import { buildClientSchema, introspectionFromSchema } from "graphql";
import { addMocksToSchema } from "@graphql-tools/mock";
const schema = buildClientSchema(introspectionResult);
const mockedSchema = addMocksToSchema({ schema });

tRPC como alternativa

Para proyectos que solo usan TypeScript, tRPC proporciona seguridad de tipos de extremo a extremo sin un lenguaje de esquemas: el tipo del router del servidor ES el contrato del cliente.

// Server: router infers types
const router = t.router({ getUser: t.procedure.query(() => fetchUser()) });
// Client: types flow automatically via inference
const { data } = trpc.getUser.useQuery();

Zod + tRPC para validación

Combine los esquemas de Zod con los validadores de entrada de tRPC para obtener validación en tiempo de ejecución y tipos en tiempo de compilación a partir de una única definición.

const createUser = t.procedure
  .input(z.object({ name: z.string(), email: z.string().email() }))
  .mutation(({ input }) => saveUser(input));
// input: { name: string; email: string } — from Zod schema

CI: canalización completa de seguridad del esquema

Una canalización completa de CI para la seguridad basada en el esquema: analizar el esquema → comprobar cambios incompatibles → ejecutar codegen → comprobar tipos → ejecutar pruebas.

# .github/workflows/schema.yml
- run: npx graphql-inspector validate ...
- run: npx graphql-codegen --check
- run: npx tsc --noEmit
- run: npm test

Recapitulación: flujo de trabajo schema-first

TypeScript con schema-first: definir SDL → generar tipos de resolvers del servidor → generar tipos de operaciones del cliente → detectar cambios incompatibles en CI. El esquema es la única fuente de verdad para todas las capas de seguridad de tipos.

Comprobación rápida

¿Qué función cumple el esquema de GraphQL en un flujo de trabajo schema-first?

Lo que ha aprendido

Los flujos de trabajo de TypeScript basados en schema-first derivan todos los tipos del esquema de GraphQL. Genere tipos de resolvers para el servidor y tipos de operaciones para el cliente, detecte cambios incompatibles en CI y mantenga el esquema como contrato entre todas las capas.

Preguntas frecuentes

¿La lección «Seguridad de tipos de extremo a extremo: flujo schema first» es gratis?

Sí — el texto completo de «Seguridad de tipos de extremo a extremo: flujo schema first» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de TypeScript Academy, actualiza a CoddyKit PRO. El curso de TypeScript Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Seguridad de tipos de extremo a extremo: flujo schema first»?

Mantenga una única fuente de verdad desde el esquema hasta el cliente. Practicas TypeScript Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar TypeScript Academy?

No se requiere experiencia previa. TypeScript Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.

¿Cuánto tiempo toma la lección «Seguridad de tipos de extremo a extremo: flujo schema first»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de TypeScript Academy?

Sí. Cada lección de TypeScript Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Del esquema GraphQL a tipos de TypeScript
  2. Resolvers tipados con GraphQL Code Generator
  3. Cliente GraphQL tipado con Apollo y urql
  4. Seguridad de tipos de extremo a extremo: flujo schema first
← Volver a TypeScript Academy