0Pricing
TypeScript Academy · Lektion

Typsicherheit von Ende zu Ende: Schema-First-Workflow

Bewahren Sie eine zentrale Quelle der Wahrheit vom Schema bis zum Client.

Typsicherheit von Ende zu Ende: Schema-First-Workflow ist eine kostenlose TypeScript Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des TypeScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was bedeutet Schema-first?

Schema-first bedeutet, dass das GraphQL-Schema die einzige Quelle der Wahrheit ist. Frontend-Typen, Backend-Resolver und API-Verträge leiten sich alle daraus ab – dadurch kann keine Schicht vom gemeinsamen Stand abweichen.

# 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

Das Schema definieren

Schreiben Sie Ihr GraphQL-Schema in SDL (.graphql-Dateien) und legen Sie es als Vertrag zwischen Client und Server im Repository ab.

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

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

Server: Resolver-Typen generieren

Führen Sie codegen mit dem typescript-resolvers-Plugin aus, um typisierte Resolver-Signaturen aus dem Schema zu generieren.

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

Client: Operationstypen generieren

Führen Sie codegen mit typescript-operations sowie den Apollo-/urql-Plugins aus, um typisierte Hooks aus .graphql-Operationsdateien zu generieren.

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

Erkennung inkompatibler Änderungen

Verwenden Sie graphql-inspector, um inkompatible Schemaänderungen (das Entfernen von Feldern oder das Ändern von Typen) zu erkennen, bevor sie die Produktion erreichen.

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

Schema-Registry

Eine Schema-Registry (Apollo Studio, Hive) speichert Schemaversionen, verfolgt Änderungen im Zeitverlauf und warnt in CI vor inkompatiblen Änderungen.

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

Mocking mit dem Schema

Verwenden Sie das Schema, um Mock-Daten für die Cliententwicklung ohne echten Server zu generieren und die Mocks schema-konform zu halten.

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

tRPC als Alternative

Für reine TypeScript-Projekte bietet tRPC durchgängige Typsicherheit ohne eine Schemasprache – der Router-Typ des Servers ist der Vertrag für den 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 zur Validierung

Kombinieren Sie Zod-Schemas mit tRPC-Eingabevalidierern für die Laufzeitvalidierung und Typen zur Compile-Zeit aus einer einzigen Definition.

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: Vollständige Pipeline für Schema-Sicherheit

Eine vollständige CI-Pipeline für Schema-first-Sicherheit: Schema linten → inkompatible Änderungen prüfen → codegen ausführen → Typprüfung durchführen → Tests ausführen.

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

Zusammenfassung: Schema-first-Workflow

Schema-first mit TypeScript: SDL definieren → Resolver-Typen für den Server generieren → Operationstypen für den Client generieren → inkompatible Änderungen in CI erkennen. Das Schema ist die einzige Quelle der Wahrheit für alle Ebenen der Typsicherheit.

Kurzer Check

Welche Rolle spielt das GraphQL-Schema in einem Schema-first-Workflow?

Das haben Sie gelernt

Schema-first-Workflows mit TypeScript leiten alle Typen aus dem GraphQL-Schema ab. Generieren Sie Resolver-Typen für den Server und Operationstypen für den Client, erkennen Sie inkompatible Änderungen in CI und pflegen Sie das Schema als Vertrag zwischen allen Schichten.

Häufig gestellte Fragen

Ist die Lektion „Typsicherheit von Ende zu Ende: Schema-First-Workflow“ kostenlos?

Ja — der vollständige Text von „Typsicherheit von Ende zu Ende: Schema-First-Workflow“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des TypeScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der TypeScript Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Typsicherheit von Ende zu Ende: Schema-First-Workflow“?

Bewahren Sie eine zentrale Quelle der Wahrheit vom Schema bis zum Client. Du übst TypeScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um TypeScript Academy zu starten?

Keine Vorkenntnisse erforderlich. TypeScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Typsicherheit von Ende zu Ende: Schema-First-Workflow“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser TypeScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede TypeScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. GraphQL-Schema zu TypeScript-Typen
  2. Typisierte Resolver mit GraphQL Code Generator
  3. Typisierter GraphQL-Client mit Apollo und urql
  4. Typsicherheit von Ende zu Ende: Schema-First-Workflow
← Zurück zu TypeScript Academy