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

Formateur Python en ligne pour débutants

Apprenez Python facilement sans surcharge théorique. Résolvez des tâches pratiques avec vérification automatique et écrivez du code directement dans le navigateur.

Start Course

API GraphQL avec JavaScript : tutoriel étape par étape pour Node.js

GraphQL est un langage de requête puissant 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. Dans ce tutoriel, nous allons créer une API GraphQL complète en JavaScript en utilisant Node.js et Apollo Server. Vous apprendrez à configurer le serveur, définir le schéma, écrire les résolveurs et effectuer des requêtes et des mutations.



Qu'est-ce que GraphQL et pourquoi en avons-nous besoin ?

GraphQL résout plusieurs problèmes des API REST :

  • Surabondance de données : le client reçoit uniquement les champs qu'il a demandés.
  • Requêtes multiples : une seule requête GraphQL peut remplacer plusieurs points de terminaison REST.
  • Typage strict : le schéma définit les types de données et les relations entre eux.

JavaScript (Node.js) est le choix idéal pour créer une API GraphQL grâce à son vaste écosystème de paquets et à sa nature asynchrone.



Étape 1 : Installation et configuration du projet

Créez un nouveau répertoire et initialisez le projet :

mkdir graphql-api-tutorialcd graphql-api-tutorialnpm init -y

Installez les dépendances nécessaires :

npm install apollo-server graphql

Créez le fichier index.js — ce sera le point d'entrée de notre application.



Étape 2 : Définition du schéma GraphQL

Le schéma est le cœur de l'API GraphQL. Il décrit les types de données et les opérations disponibles (requêtes, mutations, abonnements). Créons un schéma simple pour gérer les livres.

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

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 deleteBook(id: ID!): Book }`;

Ici, nous avons défini :

  • Book — un type objet avec les champs id, title, author, year.
  • Query — le point d'entrée pour la lecture des données (liste des livres et livre par ID).
  • Mutation — les opérations de modification des données (ajout et suppression de livre).


Étape 3 : Écriture des résolveurs

Les résolveurs sont des fonctions qui retournent les données pour chaque champ du schéma. Créons une base de données fictive (un tableau d'objets) et implémentons les résolveurs.

let books = [  { id: '1', title: '1984', author: 'George Orwell', year: 1949 },  { id: '2', title: 'To Kill a Mockingbird', author: 'Harper Lee', year: 1960 },];

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; }, 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; }, },};

Remarquez la structure : Query et Mutation sont des objets contenant les méthodes résolveurs. Chaque résolveur prend trois arguments : parent (le résultat du résolveur parent), args (les arguments de la requête) et context (un objet de contexte, par exemple pour l'authentification).



Étape 4 : Lancement du serveur et test

Maintenant, connectons le schéma et les résolveurs dans Apollo Server :

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

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

Blogs

Book Recommendations