Exercice Pratique : Mise en place d’un serveur GraphQL simple

L’objectif de cet exercice est de créer un serveur GraphQL simple qui permet de :

1. Récupérer des données via des requêtes (Query).
2. Modifier des données avec des mutations (Mutation).
3. Tester les interactions en utilisant un client GraphQL comme GraphiQL ou Apollo Explorer.

Prérequis

• Node.js installé sur votre machine.
• Un éditeur de code comme Visual Studio Code.
• Les dépendances nécessaires : npm install @apollo/server graphql.

Étape 1 : Structure du projet

Créez un répertoire et initialisez un projet Node.js :

mkdir exercice-graphql
cd exercice-graphql
npm init -y

Installez les dépendances nécessaires :

npm install @apollo/server graphql

Étape 2 : Création du serveur GraphQL

Créez un fichier principal index.js et ajoutez le code suivant :

Définir le schéma

Nous allons créer un schéma pour gérer une liste d’étudiants, avec des propriétés comme id, name, et email.

const { ApolloServer } = require('@apollo/server');
const { startStandaloneServer } = require('@apollo/server/standalone');
 
// Définition du schéma
const typeDefs = `
  type Student {
    id: ID!
    name: String!
    email: String!
  }
 
  type Query {
    students: [Student]
    student(id: ID!): Student
  }
 
  type Mutation {
    addStudent(name: String!, email: String!): Student
  }
`;
 
// Données simulées
const students = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
  { id: '2', name: 'Bob', email: 'bob@example.com' },
];
 
// Resolvers : Fournissent la logique pour les requêtes et mutations
const resolvers = {
  Query: {
    students: () => students,
    student: (_, { id }) => students.find(student => student.id === id),
  },
  Mutation: {
    addStudent: (_, { name, email }) => {
      const newStudent = {
        id: String(students.length + 1),
        name,
        email,
      };
      students.push(newStudent);
      return newStudent;
    },
  },
};
 
// Création du serveur Apollo
const server = new ApolloServer({ typeDefs, resolvers });

Démarrer le serveur

Ajoutez la configuration pour démarrer le serveur sur un port donné :

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

Étape 3 : Lancer et tester le serveur

1. Démarrez le serveur GraphQL :

   node index.js

   Vous devriez voir :

   🚀 Serveur prêt à l'adresse : http://localhost:4000/

2. Ouvrez l’URL dans un navigateur ou un client comme GraphiQL ou Apollo Studio Explorer.

Étape 4 : Tester les requêtes et mutations

Requête pour récupérer tous les étudiants

query {
  students {
    id
    name
    email
  }
}

Réponse attendue :

{
  "data": {
    "students": [
      {
        "id": "1",
        "name": "Alice",
        "email": "alice@example.com"
      },
      {
        "id": "2",
        "name": "Bob",
        "email": "bob@example.com"
      }
    ]
  }
}

Requête pour récupérer un étudiant spécifique

query {
  student(id: "1") {
    name
    email
  }
}

Réponse attendue :

{
  "data": {
    "student": {
      "name": "Alice",
      "email": "alice@example.com"
    }
  }
}

Mutation pour ajouter un étudiant

mutation {
  addStudent(name: "Charlie", email: "charlie@example.com") {
    id
    name
    email
  }
}

Réponse attendue :

{
  "data": {
    "addStudent": {
      "id": "3",
      "name": "Charlie",
      "email": "charlie@example.com"
    }
  }
}

Refaites une requête pour tous les étudiants et vérifiez que le nouvel étudiant a bien été ajouté.

Étape 5 : Étendre l’exercice (facultatif)

1. Ajouter des relations : Associez des étudiants à des cours (par exemple, type Course).
2. Pagination : Implémentez un système pour retourner les étudiants par page (par exemple, limit et offset).
3. Validation : Ajoutez des vérifications sur les champs envoyés dans les mutations (par exemple, vérifier que l’email est valide).
4. Sécurisation : Implémentez une logique de permissions pour restreindre l’accès à certaines données.

Résumé des objectifs atteints

Cet exercice fournit une base solide pour comprendre et manipuler GraphQL. Vous pouvez l’étendre en fonction des besoins spécifiques de vos projets.