API GraphQL avec JavaScript : tutoriel pas à pas pour Node.js

API GraphQL avec JavaScript : tutoriel pas à pas

GraphQL est un langage de requête pour API qui permet aux clients de demander uniquement les données dont ils ont réellement besoin. Contrairement à REST, où la structure de la réponse est fixe, GraphQL offre flexibilité et contrôle. Dans ce tutoriel, nous allons créer une API GraphQL simple sur Node.js en utilisant la bibliothèque populaire Apollo Server.

Vous apprendrez à configurer le serveur, définir les types de données, écrire des résolveurs et effectuer des requêtes et des mutations. Tous les exemples de code peuvent être exécutés localement.

1. Configuration de l'environnement et installation des dépendances

Avant d'écrire du code, assurez-vous d'avoir Node.js installé (version 14 ou supérieure). Créez un nouveau dossier pour le projet et initialisez npm :

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installez maintenant les paquets nécessaires. Les dépendances principales sont : express (framework web), @apollo/server (serveur GraphQL), graphql (cœur de GraphQL) et cors (pour les requêtes cross-origin).

npm install express @apollo/server graphql cors

Créez un fichier index.js — il contiendra tout le code du serveur.

2. Création du schéma GraphQL et des résolveurs

Le schéma est une description des types de données et des opérations (requêtes, mutations). Les résolveurs sont des fonctions qui retournent les données pour chaque champ.

Ajoutons un modèle de données simple — une liste de livres. Chaque livre a un id, un title, un author et une year.

Ouvrez index.js et écrivez le code suivant :

const { ApolloServer } = require('@apollo/server');const { startStandaloneServer } = require('@apollo/server/standalone');const express = require('express');const cors = require('cors');

// Simulation de base de donnéeslet books = [  { id: '1', title: 'Война и мир', author: 'Лев Толстой', year: 1869 },  { id: '2', title: 'Преступление и наказание', author: 'Федор Достоевский', year: 1866 },  { id: '3', title: 'Мастер и Маргарита', author: 'Михаил Булгаков', year: 1967 }];

// Définition du schéma (Type Definitions)const typeDefs = `#graphql  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    deleteBook(id: ID!): Book  }`;

// Résolveursconst 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;    },    deleteBook: (parent, args) => {      const index = books.findIndex(book => book.id === args.id);      if (index === -1) return null;      const deletedBook = books.splice(index, 1)[0];      return deletedBook;    }  }};

// Démarrage du serveurasync function startServer() {  const app = express();  app.use(cors());

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

  const { url } = await startStandaloneServer(server, {    listen: { port: 4000 },  });

  console.log(`Serveur GraphQL démarré sur ${url}`);}

startServer();

Analysons le code :

• typeDefs — définit les types Book, Query (requêtes) et Mutation (modifications).
• resolvers — contient les fonctions pour chaque champ. Pour books, le tableau entier est retourné, pour book — un filtrage par id.
• startStandaloneServer — démarre le serveur sur le port 4000.

3. Test de l'API via GraphQL Playground