TypeScript Academy · Leçon

Sûreté des types de bout en bout : flux de travail fondé sur le schéma

Conservez une source unique de vérité, du schéma au client

Leçon 4 sur 413 étapes

Sûreté des types de bout en bout : flux de travail fondé sur le schéma est une leçon TypeScript Academy gratuite sur CoddyKit. Ceci est la leçon 4 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage TypeScript Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours TypeScript Academy comprend 4 leçons au total.

Qu’est-ce qu’une approche centrée sur le schéma ?

Une approche centrée sur le schéma signifie que le schéma GraphQL est l’unique source de vérité. Les types du frontend, les résolveurs du backend et les contrats d’API en dérivent tous — ce qui empêche chaque couche de perdre sa synchronisation avec les autres.

# 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

Définir le schéma

Écrivez votre schéma GraphQL en SDL (dans des fichiers .graphql) et validez-le dans le dépôt comme contrat entre le client et le serveur.

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

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

Serveur : générer les types de résolveur

Exécutez la génération de code avec l’extension typescript-resolvers pour générer les signatures typées des résolveurs à partir du schéma.

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

Client : générer les types d’opérations

Exécutez la génération de code avec typescript-operations et les extensions Apollo/urql pour générer des hooks typés à partir des fichiers d’opérations .graphql.

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

Détection des changements incompatibles

Utilisez graphql-inspector pour détecter les changements incompatibles du schéma (suppression de champs, modification de types) avant leur déploiement en production.

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

Registre de schémas

Un registre de schémas (Apollo Studio, Hive) stocke les versions du schéma, suit les changements au fil du temps et signale les changements incompatibles dans l’intégration continue.

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

Créer des simulations avec le schéma

Utilisez le schéma pour générer des données simulées lors du développement du client, sans serveur réel, tout en gardant les simulations conformes au schéma.

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

tRPC comme solution alternative

Pour les projets exclusivement TypeScript, tRPC fournit une sécurité de typage de bout en bout sans langage de schéma — le type du routeur serveur IS le contrat du 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 pour la validation

Combinez les schémas Zod avec les validateurs d’entrée tRPC pour effectuer une validation à l’exécution et obtenir les types à la compilation à partir d’une définition unique.

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 : chaîne complète de sécurité du schéma

Une chaîne CI complète pour garantir la sécurité d’une approche centrée sur le schéma : analyser le schéma → vérifier les changements incompatibles → exécuter la génération de code → vérifier les types → exécuter les tests.

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

Récapitulatif : flux de travail centré sur le schéma

TypeScript centré sur le schéma : définir le SDL → générer les types des résolveurs serveur → générer les types des opérations client → détecter les changements incompatibles dans l’intégration continue. Le schéma est l’unique source de vérité pour toutes les couches de sécurité de typage.

Vérification rapide

Quel est le rôle du schéma GraphQL dans un flux de travail centré sur le schéma ?

Réponds-y dans la leçon interactive

Ce que vous avez appris

Les flux de travail TypeScript centrés sur le schéma dérivent tous leurs types du schéma GraphQL. Générez les types des résolveurs pour le serveur et les types des opérations pour le client, détectez les changements incompatibles dans l’intégration continue et gérez le schéma comme contrat entre toutes les couches.

Gratuit pour commencer

Apprends TypeScript avec un tuteur IA — gratuit

Écris et exécute du vrai code dans ton navigateur, obtiens de l'aide instantanée d'un tuteur IA disponible 24h/24, et reprends là où tu t'es arrêté sur le web ou dans l'app.

Cours: 101
Leçons: 352

Commencer gratuitement Voir le cours complet

Questions Fréquemment Posées

La leçon « Sûreté des types de bout en bout : flux de travail fondé sur le schéma » est-elle gratuite ?

Oui — le texte complet de « Sûreté des types de bout en bout : flux de travail fondé sur le schéma » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours TypeScript Academy, passe à CoddyKit PRO. Le cours TypeScript Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Sûreté des types de bout en bout : flux de travail fondé sur le schéma » ?

Conservez une source unique de vérité, du schéma au client Tu pratiques TypeScript Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer TypeScript Academy ?

Aucune expérience préalable n'est requise. TypeScript Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 4 sur 4.

Combien de temps prend la leçon « Sûreté des types de bout en bout : flux de travail fondé sur le schéma » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon TypeScript Academy ?

Oui. Chaque leçon TypeScript Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

Schéma GraphQL vers types TypeScript
Résolveurs typés avec GraphQL Code Generator
Client GraphQL typé avec Apollo et urql
Sûreté des types de bout en bout : flux de travail fondé sur le schéma

← Retour à TypeScript Academy