PricingLoginStart free
TypeScript Academy · Lektion

Från GraphQL-schema till TypeScript-typer

Generera typer från .graphql-filer med codegen

Lektion 1 av 413 steg

Från GraphQL-schema till TypeScript-typer är en gratis lektion i TypeScript Academy på CoddyKit. Detta är lektion 1 av 4. Ni kan läsa hela lektionen gratis nedan och sedan öva praktiskt i webbläsaren med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt. Den ingår i lärvägen för TypeScript Academy, och Era framsteg synkroniseras mellan webben och CoddyKit-appen. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Problemet: Schema och typer hamnar ur synk

I GraphQL-projekt hamnar serverschemat och klientens TypeScript-typer lätt ur synk utan automatisering. Kodgenerering löser detta genom att härleda typer direkt från schemat.

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

GraphQL Code Generator

@graphql-codegen/cli läser GraphQL-schemat och genererar TypeScript-typer automatiskt.

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

Konfiguration av codegen.yml

Konfigurera schemakällan och utdata-platsen i codegen.yml.

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

Kör generatorn

Kör graphql-codegen för att generera TypeScript-typer från schemat.

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

Exempel på genererade utdata

Den genererade filen innehåller TypeScript-interface som motsvarar varje GraphQL-typ i schemat.

// 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 från en fjärrendpoint

Codegen kan också hämta schemat från en aktiv GraphQL-endpoint med hjälp av introspektion.

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

Mappning av skalärtyper

Mappa anpassade GraphQL-skalärer till TypeScript-typer i codegen-konfigurationen.

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

Hantering av enumtyper

GraphQL-enums mappas till TypeScript string-enums eller unionstyper beroende på codegen-konfigurationen.

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

Non-Null och Maybe

Nullable GraphQL-fält blir Maybe (det vill säga T | null | undefined) i genererade typer, vilket återspeglar schemats nullbarhet.

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

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

CI-integrering

Kör codegen i CI för att verifiera att de genererade typerna är uppdaterade. Låt bygget misslyckas om schemat har ändrats utan att genereras om.

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

Sammanfattning: Från schema till typer

GraphQL Code Generator läser schemat och producerar TypeScript-typer automatiskt. Konfigurera med codegen.yml, kör graphql-codegen och integrera det i CI för att förhindra att schemat och typerna hamnar ur synk.

Snabbkontroll

Vad är det huvudsakliga syftet med GraphQL Code Generator?

Besvara frågan i den interaktiva lektionen

Det här har ni lärt er

GraphQL Code Generator eliminerar skillnader mellan schema och typer genom att generera TypeScript från schemat. Konfigurera det med codegen.yml, mappa anpassade skalärer och integrera det i CI för att säkerställa att typerna är uppdaterade.

Gratis att börja

Lär dig TypeScript med en AI-lärare – gratis

Skriv och kör riktig kod i webbläsaren, få omedelbar hjälp av en AI-lärare dygnet runt och fortsätt där du slutade – på webben eller i appen.

Kurser
101
Lektioner
352
Börja lära dig gratisVisa hela kursen

Vanliga frågor

Är lektionen ”Från GraphQL-schema till TypeScript-typer” gratis?

Ja – hela texten till ”Från GraphQL-schema till TypeScript-typer” kan läsas gratis här på webben. Om Ni vill öva interaktivt med en inbyggd kodredigerare och en AI-handledare som är tillgänglig dygnet runt och låsa upp resten av kursen i TypeScript Academy, kan Ni uppgradera till CoddyKit PRO. Kursen i TypeScript Academy innehåller totalt 4 lektioner.

Vad lär jag mig i ”Från GraphQL-schema till TypeScript-typer”?

Generera typer från .graphql-filer med codegen Ni övar på TypeScript Academy med praktisk kod som körs direkt i webbläsaren, medan en AI-handledare som är tillgänglig dygnet runt svarar på Era frågor under lektionen.

Behöver jag någon erfarenhet för att börja lära mig TypeScript Academy?

Du behöver inga förkunskaper. Utbildningen i TypeScript Academy på CoddyKit är upplagd för allt från nybörjare till avancerade elever, så att du kan börja här eller från början och gå fram i din egen takt. Detta är lektion 1 av 4.

Hur lång tid tar lektionen ”Från GraphQL-schema till TypeScript-typer”?

De flesta CoddyKit-lektioner tar cirka 5–10 minuter. Varje lektion är kort och interaktiv, så att du gör stadiga framsteg och kan fortsätta precis där du slutade – på webben eller i appen.

Kan jag skriva och köra kod i den här TypeScript Academy-lektionen?

Ja. Varje TypeScript Academy-lektion innehåller en inbyggd kodredigerare, så att du kan skriva och köra riktig kod direkt i webbläsaren och få omedelbar AI-feedback – utan lokal installation.

Alla lektioner i den här kursen

  1. Från GraphQL-schema till TypeScript-typer
  2. Typade resolvers med GraphQL Code Generator
  3. Typad GraphQL-klient med Apollo och urql
  4. Typsäkerhet från början till slut: schema-first-arbetsflöde
← Tillbaka till TypeScript Academy