0Pricing
TypeScript Academy · Lezione

Sicurezza dei tipi end-to-end: workflow schema first

Mantenga un'unica fonte di verità dallo schema al client.

Sicurezza dei tipi end-to-end: workflow schema first è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 4 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento TypeScript Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso TypeScript Academy include 4 lezioni in totale.

Che cos'è schema-first

Schema-first significa che lo schema GraphQL è l'unica fonte di verità. I tipi del frontend, i resolver del backend e i contratti dell'API derivano tutti da esso, evitando che un livello perda la sincronizzazione con gli altri.

# 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

Definire lo schema

Scriva lo schema GraphQL in SDL (file .graphql) e lo sottoponga al repository come contratto tra client e server.

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

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

Server: generare i tipi dei resolver

Esegua codegen con il plugin typescript-resolvers per generare le firme tipizzate dei resolver a partire dallo schema.

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

Client: generare i tipi delle operazioni

Esegua codegen con typescript-operations e i plugin per Apollo/urql per generare hook tipizzati dai file delle operazioni .graphql.

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

Rilevamento delle modifiche incompatibili

Utilizzi graphql-inspector per rilevare le modifiche incompatibili allo schema, come la rimozione di campi o la modifica dei tipi, prima che raggiungano la produzione.

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

Registro dello schema

Un registro degli schemi (Apollo Studio, Hive) conserva le versioni dello schema, tiene traccia delle modifiche nel tempo e segnala le modifiche incompatibili nella CI.

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

Mock con lo schema

Utilizzi lo schema per generare dati mock durante lo sviluppo del client senza un server reale, mantenendo i mock conformi allo schema.

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

tRPC come alternativa

Per i progetti esclusivamente in TypeScript, tRPC offre la sicurezza dei tipi dall'inizio alla fine senza un linguaggio per gli schemi: il tipo del router del server È il contratto del client.

// 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 per la validazione

Combini gli schemi Zod con i validatori di input di tRPC per ottenere la validazione a runtime e i tipi in fase di compilazione da un'unica definizione.

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: pipeline completa per la sicurezza dello schema

Una pipeline CI completa per la sicurezza con schema-first: controlli lo stile dello schema → verifichi le modifiche incompatibili → esegua codegen → verifichi i tipi → esegua i test.

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

Riepilogo: workflow schema-first

TypeScript con schema-first: definisca SDL → generi i tipi dei resolver del server → generi i tipi delle operazioni del client → rilevi le modifiche incompatibili nella CI. Lo schema è l'unica fonte di verità per tutti i livelli di sicurezza dei tipi.

Verifica rapida

Qual è il ruolo dello schema GraphQL in un workflow schema-first?

Cosa ha imparato

I workflow TypeScript schema-first derivano tutti i tipi dallo schema GraphQL. Generi i tipi dei resolver per il server e i tipi delle operazioni per il client, rilevi le modifiche incompatibili nella CI e mantenga lo schema come contratto tra tutti i livelli.

Domande Frequenti

La lezione «Sicurezza dei tipi end-to-end: workflow schema first» è gratuita?

Sì — il testo completo di «Sicurezza dei tipi end-to-end: workflow schema first» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso TypeScript Academy, passa a CoddyKit PRO. Il corso TypeScript Academy include 4 lezioni in totale.

Cosa imparerò in «Sicurezza dei tipi end-to-end: workflow schema first»?

Mantenga un'unica fonte di verità dallo schema al client. Eserciti TypeScript Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare TypeScript Academy?

Non è richiesta alcuna esperienza precedente. TypeScript Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 4 di 4.

Quanto tempo richiede la lezione «Sicurezza dei tipi end-to-end: workflow schema first»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione TypeScript Academy?

Sì. Ogni lezione TypeScript Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

  1. Dallo schema GraphQL ai tipi TypeScript
  2. Resolver tipizzati con GraphQL Code Generator
  3. Client GraphQL tipizzato con Apollo e urql
  4. Sicurezza dei tipi end-to-end: workflow schema first
← Torna a TypeScript Academy