Exemple pratique simple avec un serveur GraphQL

L’objectif de cet exemple est de mettre en place un serveur GraphQL de base, capable de répondre à une requête simple et d’illustrer le fonctionnement de ses principaux concepts. Nous utiliserons Node.js et le package Apollo Server, l’un des frameworks les plus populaires pour créer des serveurs GraphQL.

Étape 1 : Préparation de l’environnement

Installer Node.js et npm
Assurez-vous que Node.js est installé sur votre machine. Si ce n’est pas le cas, téléchargez-le depuis nodejs.org.
Initialiser un projet Node.js
Créez un répertoire pour votre projet et initialisez-le avec npm:
```
mkdir graphql-server
cd graphql-server
npm init -y
```
Installer les dépendances nécessaires
Installez Apollo Server et GraphQL :
```
npm install @apollo/server graphql
```

Étape 2 : Création du serveur GraphQL

1. Définir le schéma

Le schéma déclare les types et les opérations disponibles dans notre API.
Dans ce cas, nous allons gérer une liste d’utilisateurs avec les propriétés suivantes : id, name, et email.

Fichier : index.js

const { ApolloServer } = require('@apollo/server');
 
// Définition du schéma
const typeDefs = `
  type User {
    id: ID!
    name: String!
    email: String!
  }
 
  type Query {
    users: [User]
  }
`;
 
// Données simulées (une base de données fictive)
const users = [
  { id: '1', name: 'Alice', email: 'alice@example.com' },
  { id: '2', name: 'Bob', email: 'bob@example.com' },
];
 
// Resolvers pour fournir les données
const resolvers = {
  Query: {
    users: () => users,
  },
};
 
// Création du serveur
const server = new ApolloServer({ typeDefs, resolvers });

2. Configurer et démarrer le serveur

Ajoutez le code pour démarrer le serveur.

// Importer des modules pour le serveur HTTP
const { startStandaloneServer } = require('@apollo/server/standalone');
 
// Démarrage du serveur
startStandaloneServer(server, {
  listen: { port: 4000 },
}).then(({ url }) => {
  console.log(`🚀 Serveur GraphQL prêt à l'adresse : ${url}`);
});

Étape 3 : Lancer le serveur

Dans le terminal, exécutez :

node index.js

Vous devriez voir un message indiquant que le serveur est prêt, avec l’URL suivante :

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

Étape 4 : Effectuer une première requête

Ouvrez un navigateur ou un client GraphQL comme GraphiQL ou Apollo Studio Explorer, puis envoyez la requête suivante pour obtenir la liste des utilisateurs :

query {
  users {
    id
    name
    email
  }
}

Réponse attendue :

Le serveur retournera un objet JSON avec les données :

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

Explications des composants clés

Schéma (typeDefs) :
- Décrit les types (User) et les opérations disponibles (Query { users }).
- Sert de contrat entre le client et le serveur.
Resolvers :
- Contiennent la logique pour obtenir les données.
- Dans notre exemple, le resolver pour users renvoie une liste d’objets utilisateurs.
Serveur GraphQL (ApolloServer) :
- Combine le schéma et les resolvers pour répondre aux requêtes du client.

Étape 5 : Étendre le serveur (facultatif)

Vous pouvez enrichir le serveur en ajoutant des mutations pour modifier les données ou des subscriptions pour des mises à jour en temps réel. Voici un exemple d’ajout d’une mutation pour créer un utilisateur :

Ajout dans typeDefs :

type Mutation {
  createUser(name: String!, email: String!): User
}

Ajout dans resolvers :

Mutation: {
  createUser: (_, { name, email }) => {
    const newUser = { id: String(users.length + 1), name, email };
    users.push(newUser);
    return newUser;
  },
},

Ce simple exemple pratique illustre comment démarrer avec un serveur GraphQL et effectuer des requêtes de base. Vous pouvez désormais explorer des concepts avancés comme les relations entre types, la pagination, et la sécurisation des données.

Fondamentaux Avantages de GraphQL