API GraphQL avec TypeScript : tutoriel pratique pas à pas

Introduction à l'API GraphQL avec TypeScript

GraphQL est un langage de requête pour votre API qui permet aux clients de demander uniquement les données dont ils ont réellement besoin. Combiné à TypeScript, vous bénéficiez d'un typage strict, de l'autocomplétion dans l'IDE et de moins d'erreurs lors de la compilation. Dans ce tutoriel, nous allons créer une API GraphQL complète à partir de zéro en utilisant TypeScript et Apollo Server.

Ce guide est destiné aux développeurs connaissant les bases de JavaScript et Node.js. Nous passerons de l'installation des dépendances au test de l'API finale.

1. Configuration du projet et installation des dépendances

Commencez par créer un nouveau projet et installer les packages nécessaires. Ouvrez un terminal et exécutez :

mkdir graphql-ts-tutorialcd graphql-ts-tutorialnpm init -y

Installez TypeScript, Apollo Server et GraphQL :

npm install apollo-server graphqlnpm install -D typescript @types/node ts-node nodemon

Créez le fichier tsconfig.json pour la configuration TypeScript :

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

Créez le dossier src et le fichier src/index.ts — ce sera le point d'entrée de notre application.

2. Création du schéma GraphQL et des types TypeScript

Dans GraphQL, le schéma définit les types de données et les opérations disponibles pour le client. Créons un schéma simple pour gérer des livres.

Fichier src/schema.ts :

import { gql } from 'apollo-server';

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

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

  type Mutation {    addBook(title: String!, author: String!, publishedYear: Int): Book    deleteBook(id: ID!): Book  }`;

Définissons maintenant les interfaces TypeScript pour nos données. Créez src/types.ts :

export interface Book {  id: string;  title: string;  author: string;  publishedYear?: number;}

Remarque : les interfaces TypeScript sont nécessaires pour la logique interne, tandis que les types GraphQL sont destinés à l'interaction client-serveur. Ils doivent être cohérents.

3. Implémentation des résolveurs et du serveur

Les résolveurs sont des fonctions qui renvoient les données pour chaque champ du schéma. Créons le fichier src/resolvers.ts avec une simulation de base de données :

import { Book } from './types';

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

export const resolvers = {  Query: {    books: (): Book[] => books,    book: (_: any, args: { id: string }): Book | undefined => {      return books.find(book => book.id === args.id);    },  },  Mutation: {    addBook: (_: any, args: { title: string; author: string; publishedYear?: number }): Book => {      const newBook: Book = {        id: String(books.length + 1),        title: args.title,        author: args.author,        publishedYear: args.publishedYear,      };      books.push(newBook);      return newBook;    },    deleteBook: (_: any, args: { id: string }): Book | null => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    },  },};

Assemblons maintenant tout dans le fichier principal src/index.ts :

import { ApolloServer } from 'apollo-server';import { typeDefs } from './schema';import { r