API GraphQL avec JavaScript : tutoriel pratique étape par étape

Introduction à GraphQL et ses avantages

GraphQL est un langage de requête et un environnement d'exécution pour les API, développé par Facebook. Contrairement à REST, où vous obtenez des structures de données fixes, GraphQL permet au client de demander uniquement ce dont il a besoin. Cela rend les API plus flexibles et efficaces.

Dans ce tutoriel étape par étape, nous allons créer une API GraphQL complète en JavaScript en utilisant Node.js. Vous apprendrez à configurer le serveur, définir des schémas, gérer les requêtes et les mutations. À la fin de l'article, vous aurez une API fonctionnelle, prête à être intégrée dans n'importe quel projet.

1. Configuration du projet et installation des dépendances

Pour commencer, créons un nouveau projet Node.js et installons les packages nécessaires. Nous utiliserons apollo-server — une bibliothèque populaire pour créer des serveurs GraphQL.

Étape 1 : Initialisation du projet

mkdir graphql-tutorial\ncd graphql-tutorial\nnpm init -y

Étape 2 : Installation d'Apollo Server et GraphQL

npm install apollo-server graphql

Après l'installation, créons le fichier principal index.js, où se trouvera notre serveur.

2. Création d'un serveur GraphQL de base

Écrivons maintenant un serveur minimal qui acceptera les requêtes et renverra des réponses. Pour cela, définissons un schéma (schema) et des résolveurs (resolvers).

Étape 1 : Définition du type de données

Créons un type simple Book avec les champs id, title et author.

const { ApolloServer, gql } = require('apollo-server');\n\n// Schéma GraphQL\nconst typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n`;\n\n// Exemple de données (dans un projet réel — base de données)\nconst books = [\n  { id: '1', title: 'Guerre et Paix', author: 'Léon Tolstoï' },\n  { id: '2', title: 'Crime et Châtiment', author: 'Fiodor Dostoïevski' },\n  { id: '3', title: 'Le Maître et Marguerite', author: 'Mikhaïl Boulgakov' }\n];\n\n// Résolveurs — fonctions qui renvoient les données\nconst resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  }\n};\n\n// Création du serveur\nconst server = new ApolloServer({ typeDefs, resolvers });\n\n// Démarrage du serveur\nserver.listen().then(({ url }) => {\n  console.log(`🚀  Serveur prêt à l'adresse : ${url}`);\n});

Étape 2 : Démarrage et test

Exécutez la commande node index.js et ouvrez http://localhost:4000 dans votre navigateur. Vous verrez GraphQL Playground — un outil pour tester les requêtes.

Essayez d'exécuter une requête simple :

{\n  books {\n    title\n    author\n  }\n}

La réponse doit contenir la liste des livres avec les champs spécifiés.

3. Ajout de mutations et extension du schéma

Ajoutons maintenant la possibilité de modifier les données via des mutations. Cela permettra de créer, mettre à jour et supprimer des enregistrements.

Étape 1 : Définition des mutations dans le schéma

const typeDefs = gql`\n  type Book {\n    id: ID!\n    title: String!\n    author: String!\n  }\n\n  input BookInput {\n    title: String!\n    author: String!\n  }\n\n  type Query {\n    books: [Book]\n    book(id: ID!): Book\n  }\n\n  type Mutation {\n    addBook(input: BookInput!): Book\n    deleteBook(id: ID!): Book\n  }\n`;

Étape 2 : Implémentation des résolveurs pour les mutations

const resolvers = {\n  Query: {\n    books: () => books,\n    book: (parent, args) => books.find(book => book.id === args.id)\n  },\n  Mutation: {\n    addBook: (parent, args) => {\n      const newBook = {\n        id: String(books.length + 1),\n        title: args.input.title,\n        author: args.input.author\n      };\n      books.push(newBook);\n      return newBook;\n    },\n    deleteBook: (parent, args) => {\n      const index = books.findIndex(book => book.id