0Pricing
TypeScript Academy · Lezione

Dallo schema GraphQL ai tipi TypeScript

Generi tipi dai file .graphql con codegen.

Dallo schema GraphQL ai tipi TypeScript è una lezione TypeScript Academy gratuita su CoddyKit. Questa è la lezione 1 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.

Il problema: deriva tra schema e tipi

Nei progetti GraphQL, lo schema del server e i tipi TypeScript del client possono facilmente non essere più sincronizzati in assenza di automazione. La generazione del codice risolve il problema derivando i tipi direttamente dallo schema.

# Without codegen: manual types that drift from schema
interface User { id: string; name: string; } // may not match schema

GraphQL Code Generator

@graphql-codegen/cli legge lo schema GraphQL e genera automaticamente i tipi TypeScript.

npm install --save-dev @graphql-codegen/cli @graphql-codegen/typescript

Configurazione di codegen.yml

Configuri l'origine dello schema e il percorso di output in codegen.yml.

# codegen.yml
schema: "./api/schema.graphql"
generates:
  src/generated/types.ts:
    plugins:
      - typescript

Eseguire il generatore

Esegua graphql-codegen per generare i tipi TypeScript dallo schema.

npx graphql-codegen
# Generates src/generated/types.ts with all schema types

Esempio di output generato

Il file generato contiene interfacce TypeScript corrispondenti a ogni tipo GraphQL presente nello schema.

// src/generated/types.ts (generated)
export type User = {
  __typename?: "User";
  id: string;
  name: string;
  email: string;
};

export type Query = {
  __typename?: "Query";
  user?: Maybe<User>;
};

Schema da un endpoint remoto

Codegen può anche recuperare lo schema da un endpoint GraphQL attivo utilizzando l'introspection.

# codegen.yml with remote schema
schema:
  - https://api.example.com/graphql:
      headers:
        Authorization: "Bearer ${AUTH_TOKEN}"

Mappatura dei tipi scalari

Mappi gli scalari GraphQL personalizzati sui tipi TypeScript nella configurazione di codegen.

# codegen.yml
config:
  scalars:
    DateTime: string
    JSON: Record<string, unknown>
    Upload: File

Gestione degli enum

Gli enum GraphQL vengono mappati su enum stringa TypeScript o su tipi union, a seconda della configurazione di codegen.

# Generated from GraphQL enum Role { ADMIN USER GUEST }
export enum Role {
  Admin = "ADMIN",
  User = "USER",
  Guest = "GUEST",
}

Non-null e Maybe

I campi GraphQL nullable diventano Maybe, ovvero T | null | undefined, nei tipi generati, riflettendo la nullability dello schema.

// GraphQL: name: String (nullable)
// Generated: name?: Maybe<string>

// GraphQL: id: ID! (non-null)
// Generated: id: string

Integrazione con la CI

Esegua codegen in CI per verificare che i tipi generati siano aggiornati. Interrompa la build se lo schema è cambiato senza rigenerare i tipi.

# CI: check no drift
npx graphql-codegen --check
# Exits 1 if generated files are out of date

Riepilogo: dallo schema ai tipi

GraphQL Code Generator legge lo schema e produce automaticamente i tipi TypeScript. Configuri lo strumento con codegen.yml, esegua graphql-codegen e lo integri nella CI per impedire la deriva dello schema.

Verifica rapida

Qual è lo scopo principale di GraphQL Code Generator?

Che cosa ha imparato

GraphQL Code Generator elimina la deriva tra schema e tipi generando codice TypeScript dallo schema. Lo configuri con codegen.yml, mappi gli scalari personalizzati e lo integri nella CI per garantire l'aggiornamento dei tipi.

Domande Frequenti

La lezione «Dallo schema GraphQL ai tipi TypeScript» è gratuita?

Sì — il testo completo di «Dallo schema GraphQL ai tipi TypeScript» è 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 «Dallo schema GraphQL ai tipi TypeScript»?

Generi tipi dai file .graphql con codegen. 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 1 di 4.

Quanto tempo richiede la lezione «Dallo schema GraphQL ai tipi TypeScript»?

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