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

Introduction à l'API GraphQL avec JavaScript

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 dont il a besoin. Cela réduit le volume de données transmises et simplifie le développement d'applications complexes.

Dans ce tutoriel, nous allons créer une API GraphQL complète avec Node.js en utilisant Apollo Server. Vous apprendrez à définir des schémas, écrire des résolveurs, effectuer des requêtes et des mutations. Tous les exemples de code sont prêts à être exécutés et testés en pratique.

Pour travailler, vous aurez besoin de Node.js version 14 ou supérieure et d'une connaissance de base de JavaScript. Si vous connaissez Express.js, Apollo Server vous semblera très similaire – il utilise également des middleware et fonctionne avec HTTP.

Installation et configuration du projet

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

mkdir graphql-tutorialcd graphql-tutorialnpm init -y

Installez les dépendances nécessaires :

npm install @apollo/server graphqlnpm install nodemon --save-dev

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

La structure de base du projet ressemblera à ceci :

graphql-tutorial/├── node_modules/├── index.js├── package.json└── package-lock.json

Création du premier serveur GraphQL

Commençons par un serveur minimal qui renvoie un simple message. Ouvrez index.js et ajoutez le code suivant :

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// Définir le schéma GraphQLconst typeDefs = `#graphql  type Query {    hello: String  }`;

// Résolveur pour la requête helloconst resolvers = {  Query: {    hello: () => 'Bonjour le monde ! C\'est la première requête GraphQL !',  },};

// Créer une instance du serveurconst server = new ApolloServer({  typeDefs,  resolvers,});

// Démarrer le serveurconst { url } = await startStandaloneServer(server, {  listen: { port: 4000 },});

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

Lancez le serveur avec la commande node index.js. Ouvrez le navigateur et allez à l'adresse http://localhost:4000. Vous verrez l'interface Apollo Sandbox, où vous pourrez exécuter des requêtes.

Saisissez dans le panneau de gauche :

query {  hello}

Et cliquez sur le bouton "Run". En réponse, vous obtiendrez :

{  "data": {    "hello": "Bonjour le monde ! C\'est la première requête GraphQL !"  }}

Travailler avec les types de données et les requêtes complexes

GraphQL permet de définir ses propres types de données. Créons un modèle d'utilisateur et de livres pour notre API.

Mettez à jour le fichier index.js :

import { ApolloServer } from '@apollo/server';import { startStandaloneServer } from '@apollo/server/standalone';

// Définir les typesconst typeDefs = `#graphql  type Book {    id: ID!    title: String!    author: String!    publishedYear: Int  }

  type User {    id: ID!    name: String!    email: String!    books: [Book]  }

  type Query {    books: [Book]    book(id: ID!): Book    users: [User]    user(id: ID!): User  }`;

// Données de testconst books = [  { id: '1', title: 'Harry Potter', author: 'J.K. Rowling', publishedYear: 1997 },  { id: '2', title: 'Le Seigneur des Anneaux', author: 'J.R.R. Tolkien', publishedYear: 1954 },  { id: '3', title: '1984', author: 'George Orwell', publishedYear: 1949 },];

const users = [  { id: '1', name: 'Ivan Ivanov', email: 'ivan@example.com', bookIds: ['1', '2'] },  { id: '2', name: 'Anna Petrova', email: 'anna@example.com', bookIds: ['3'] },];

// Résolveursconst resolvers = {  Query: {    books: () => books,    book: (_, { id }) => books.find(book => book.id === id),    users: () => users,    user: (_, { i