API GraphQL avec TypeScript : tutoriel étape par étape — partie 3

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

API GraphQL avec TypeScript : tutoriel pas à pas — partie 3

Dans les parties précédentes du tutoriel, nous avons couvert les bases de la création d'un serveur GraphQL en TypeScript et appris à configurer des requêtes simples. Dans cette dernière partie, nous aborderons des techniques avancées : les mutations, les souscriptions et la gestion des erreurs. Si vous étudiez TypeScript pour débutants et souhaitez maîtriser la programmation moderne d'API, ce matériel sera une excellente étape. Toute la formation est construite sur des exemples pratiques que vous pouvez immédiatement appliquer dans vos projets.

1. Implémentation des mutations avec TypeScript

Les mutations sont des opérations de modification de données (créer, mettre à jour, supprimer). Dans GraphQL, elles sont désignées par le mot-clé mutation. Créons une mutation pour ajouter un nouvel utilisateur.

D'abord, définissez le type dans le schéma GraphQL :

type Mutation {  addUser(name: String!, email: String!): User!}

Implémentons maintenant le résolveur en TypeScript. Notez le typage strict :

import { Resolver, Mutation, Arg } from 'type-graphql';import { User } from '../entities/User';

@Resolver()export class UserResolver {  @Mutation(() => User)  async addUser(    @Arg('name') name: string,    @Arg('email') email: string  ): Promise<User> {    const user = new User();    user.name = name;    user.email = email;    await user.save();    return user;  }}

Important : en TypeScript, nous utilisons les décorateurs @Mutation et @Arg de la bibliothèque type-graphql, ce qui rend le code propre et sûr au niveau des types. Cela est particulièrement utile pour la programmation de grands projets où la prévisibilité est importante.

2. Souscriptions pour les mises à jour en temps réel

Les souscriptions permettent aux clients de recevoir des mises à jour en temps réel via WebSocket. En TypeScript, leur implémentation nécessite une configuration supplémentaire du serveur.

Ajoutons une souscription pour les nouveaux messages :

import { Subscription, Root } from 'type-graphql';

@Resolver()export class MessageResolver {  @Subscription(() => Message, {    topics: 'NEW_MESSAGE',  })  newMessage(@Root() message: Message): Message {    return message;  }}

Pour publier un événement, utilisez pubSub.publish('NEW_MESSAGE', message). Cela permet de créer un chat ou des notifications en temps réel. Les souscriptions sont un outil puissant dans l'arsenal de la programmation, et TypeScript rend leur implémentation sûre grâce au typage statique.

3. Gestion des erreurs et validation

Une gestion correcte des erreurs est essentielle pour une API fiable. En TypeScript, nous pouvons utiliser des classes d'erreur personnalisées :

import { ApolloError } from 'apollo-server-express';

export class UserInputError extends ApolloError {  constructor(message: string) {    super(message, 'USER_INPUT_ERROR');    Object.defineProperty(this, 'name', { value: 'UserInputError' });  }}

Dans les résolveurs, nous validons les données d'entrée :

@Mutation(() => User)async createUser(@Arg('email') email: string) {  if (!email.includes('@')) {    throw new UserInputError('Format d\'email invalide');  }  // ... logique de création}

Vous pouvez également utiliser des décorateurs de validation de class-validator :

import { IsEmail, Length } from 'class-validator';

class CreateUserInput {  @Length(2, 50)  name: string;

  @IsEmail()  email: string;}

Je recommande particulièrement cette approche pour TypeScript pour débutants, car elle automatise la validation des données et réduit le nombre de bugs.