API GraphQL avec TypeScript : tutoriel pas à pas pour développeurs

Introduction à l'API GraphQL avec TypeScript

GraphQL est un langage de requête moderne pour les API qui permet aux clients de demander uniquement les données dont ils ont réellement besoin. Combiné à TypeScript, qui ajoute un typage strict, le développement devient plus prévisible et plus sûr. Dans ce tutoriel étape par étape, nous allons créer une API GraphQL complète en TypeScript, en utilisant des outils populaires et les meilleures pratiques.

Pourquoi choisir GraphQL avec TypeScript ? Premièrement, vous bénéficiez de l'autocomplétion et de la vérification des types à la compilation. Deuxièmement, GraphQL permet de combiner plusieurs requêtes en une seule, réduisant ainsi le nombre de requêtes réseau. Troisièmement, TypeScript est idéal pour décrire des structures de données graphiques complexes.

Configuration du projet et installation des dépendances

Pour commencer, créons un nouveau projet et installons les packages nécessaires. Nous utiliserons Apollo Server — le serveur le plus populaire pour GraphQL, et TypeGraphQL pour une intégration facile avec TypeScript.

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -ynpm install apollo-server graphql reflect-metadata class-validatornpm install typescript type-graphql @types/node --save-devnpx tsc --init

Après l'installation, configurons tsconfig.json. Assurez-vous que les options suivantes sont incluses :

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "lib": ["ES2020"],    "experimentalDecorators": true,    "emitDecoratorMetadata": true,    "outDir": "./dist",    "rootDir": "./src",    "strict": true,    "esModuleInterop": true  }}

Créons la structure des dossiers :

src/  ├── index.ts  ├── resolvers/  │   └── user.resolver.ts  ├── schemas/  │   └── user.schema.ts  └── data/      └── users.ts

Création du schéma et des types de données

Dans TypeGraphQL, les types de données sont décrits à l'aide de décorateurs. Créons un modèle d'utilisateur et un type de données d'entrée pour la mutation.

// src/schemas/user.schema.tsimport { ObjectType, Field, ID, InputType } from "type-graphql";

@ObjectType()export class User {  @Field(() => ID)  id!: number;

  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

@InputType()export class CreateUserInput {  @Field()  name!: string;

  @Field()  email!: string;

  @Field({ nullable: true })  age?: number;}

Notez l'utilisation de @ObjectType() pour décrire les types de retour et @InputType() pour les paramètres d'entrée. Cela permet à TypeGraphQL de générer automatiquement le schéma GraphQL.

Implémentation des résolveurs

Les résolveurs sont des fonctions qui traitent les requêtes et retournent les données. Créons un simple tableau en mémoire pour stocker les utilisateurs.

// src/data/users.tsimport { User } from "../schemas/user.schema";

export const users: User[] = [  { id: 1, name: "Иван Петров", email: "ivan@example.com", age: 28 },  { id: 2, name: "Мария Сидорова", email: "maria@example.com", age: 32 },];

Écrivons maintenant les résolveurs pour les requêtes et les mutations :

// src/resolvers/user.resolver.tsimport { Resolver, Query, Mutation, Arg, Int } from "type-graphql";import { User, CreateUserInput } from "../schemas/user.schema";import { users } from "../data/users";

@Resolver()export class UserResolver {  @Query(() => [User])  async getAllUsers(): Promise<User[]> {    return users;  }

  @Query(() => User, { nullable: true })  async getUserById(    @Arg("id", () => Int) id: number  ): Promise<User | undefined> {    return users.find(user => user.id === id);  }

  @Mutation(() => User)  async createUser(    @Arg("input") input: CreateUserInput  ): Promise<User> {    const newUser: User =