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

Introduction à GraphQL et ses avantages

GraphQL est un langage de requête pour les API, développé par Facebook. Contrairement à REST, où chaque endpoint renvoie une structure de données fixe, GraphQL permet au client de demander uniquement les champs nécessaires. Cela rend l'API plus flexible et efficace.

Dans ce tutoriel, nous allons créer un serveur GraphQL simple sur Node.js en utilisant la bibliothèque Apollo Server, configurer le schéma, implémenter des requêtes et des mutations. Vous apprendrez :

• Comment installer et configurer Apollo Server
• Comment définir un schéma avec des types de données
• Comment écrire des résolveurs pour les requêtes et les mutations
• Comment tester l'API via GraphQL Playground

Pour travailler, vous aurez besoin de Node.js (version 16+) et d'une compréhension de base de JavaScript. Commençons !

Étape 1 : Configuration du projet et installation des dépendances

Créez un nouveau répertoire pour le projet et initialisez package.json :

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installez les paquets nécessaires :

npm install apollo-server graphql

Le paquet apollo-server fournit un serveur HTTP prêt à l'emploi pour GraphQL, et graphql est le cœur pour travailler avec les schémas et les requêtes.

Étape 2 : Création du schéma de base et des résolveurs

Créez un fichier index.js et importez Apollo Server :

const { ApolloServer, gql } = require('apollo-server');

// Données en mémoire (simulation de base de données)const books = [  { id: '1', title: 'Guerre et Paix', author: 'Léon Tolstoï', year: 1869 },  { id: '2', title: 'Crime et Châtiment', author: 'Fiodor Dostoïevski', year: 1866 },  { id: '3', title: 'Le Maître et Marguerite', author: 'Mikhaïl Boulgakov', year: 1967 }];

Définissons maintenant le schéma à l'aide de la balise gql :

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

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

  type Mutation {    addBook(title: String!, author: String!, year: Int): Book  }`;

Créez les résolveurs — des fonctions qui renvoient les données pour chaque champ de requête :

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

Étape 3 : Lancement du serveur et test

Créez une instance du serveur et lancez-le :

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

server.listen().then(({ url }) => {  console.log(`🚀 Serveur prêt à l'adresse : ${url}`);});

Lancez le serveur avec la commande node index.js. Par défaut, Apollo Server démarre sur le port 4000 et ouvre GraphQL Playground — un environnement interactif pour tester les requêtes.

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

query {  books {    title    author  }}

La réponse doit contenir un tableau de livres avec les champs sélectionnés :

{  "data": {    "books": [      { "title": "Guerre et Paix", "author": "Léon Tolstoï" },      { "title": "Crime et Châtiment", "author": "Fiodor Dostoïevski" },      { "title": "Le Maître et Marguerite", "author": "Mikhaïl Boulgakov" }    ]  }}

Testons maintenant la mutation pour ajouter un nouveau livre :

mutation {  addBook(title: "Anna Karénine", author: "Léon Tolstoï", year: 1877) {    id    title    author  }}

Après avoir exécuté la mutation, le serveur renverra l'objet du nouveau livre avec l'ID attribué.

Étape 4 : Extension du schéma — relations