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

Introduction à GraphQL et TypeScript

GraphQL est un langage de requête 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 statique à JavaScript, vous obtenez un outil puissant pour créer des API fiables et évolutives. Dans ce tutoriel, nous allons créer pas à pas une API GraphQL simple en TypeScript. Vous apprendrez à configurer le projet, définir le schéma, écrire des résolveurs et exécuter des requêtes.

Ce contenu est destiné aux développeurs débutants qui connaissent les bases de JavaScript et souhaitent maîtriser les technologies modernes. À la fin de cet article, vous serez capable de déployer vous-même un serveur GraphQL de base.

Étape 1 : Configuration du projet

Avant d'écrire du code, il est nécessaire d'initialiser le projet et d'installer les dépendances. Nous utiliserons Apollo Server — l'une des bibliothèques les plus populaires pour travailler avec GraphQL dans Node.js.

Initialisation de npm

Créez un nouveau répertoire et effectuez l'initialisation :

mkdir graphql-typescript-tutorialcd graphql-typescript-tutorialnpm init -y

Installation des dépendances

Installez les paquets nécessaires :

npm install apollo-server graphqlnpm install typescript ts-node @types/node --save-dev

• apollo-server — serveur pour traiter les requêtes GraphQL.
• graphql — cœur du langage GraphQL.
• typescript et ts-node — pour la compilation et l'exécution de TypeScript.

Configuration de TypeScript

Créez le fichier tsconfig.json à la racine du projet :

{  "compilerOptions": {    "target": "ES2020",    "module": "commonjs",    "strict": true,    "esModuleInterop": true,    "outDir": "./dist",    "rootDir": "./src"  },  "include": ["src/**/*"],  "exclude": ["node_modules"]}

Créez le dossier src et le fichier index.ts — il contiendra le code principal du serveur.

Étape 2 : Définition du schéma et des types

Le schéma GraphQL décrit quelles données sont disponibles et comment elles peuvent être demandées. En TypeScript, nous utiliserons une chaîne avec la syntaxe gql pour définir les types.

Schéma de base

Ouvrez src/index.ts et ajoutez le code suivant :

import { ApolloServer, gql } from 'apollo-server';

const typeDefs = gql`  type Book {    id: ID!    title: String!    author: String!  }

  type Query {    books: [Book]    book(id: ID!): Book  }`;

Ici, nous avons défini le type Book avec les champs id, title et author. Query contient deux requêtes : obtenir tous les livres et un livre par son ID.

Données fictives

Pour les tests, ajoutons un tableau de livres :

const books = [  { id: '1', title: 'Guerre et Paix', author: 'Léon Tolstoï' },  { id: '2', title: 'Crime et Châtiment', author: 'Fiodor Dostoïevski' },];

Étape 3 : Écriture des résolveurs

Les résolveurs sont des fonctions qui renvoient les données pour chaque champ du schéma. Ils relient le schéma aux données réelles.

Implémentation des résolveurs

Ajoutez l'objet resolvers :

const resolvers = {  Query: {    books: () => books,    book: (_: any, args: { id: string }) => {      return books.find(book => book.id === args.id);    },  },};

Le premier argument _ est l'objet parent (non utilisé ici). Le deuxième argument args contient les paramètres de la requête, par exemple id.

Assemblage du serveur

Créons maintenant une instance du serveur et lançons-le :

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {  console.log(`🚀 Serveur démarré sur ${url}`);});

Compl