Consommation d’API REST et GraphQL

• REST (Representational State Transfer)
• GraphQL (Graph Query Language)
• SOAP (Simple Object Access Protocol)
• gRPC (Google Remote Procedure Call)

• Endpoint

• Une URL spécifique exposée par l’API.

• Méthodes HTTP

• GET, POST, PUT, DELETE...

• Statut HTTP

• Codes de réponse (200, 404, 500, etc.).

• Authentication

• Mécanismes de sécurisation (clé API, JWT, OAuth…)

• Client-Serveur : séparation des responsabilités.
• Sans état : chaque requête contient toutes les infos nécessaires.
• Cacheable : possibilité de mettre en cache.
• Interface uniforme : méthodes HTTP standardisées.
• Système en couches : architecture modulaire.

 GET /users # Récupérer tous les utilisateurs GET /users/1 # Récupérer l’utilisateur ID=1 POST /users # Créer un nouvel utilisateur PUT /users/1 # Modifier l’utilisateur ID=1 DELETE /users/1 # Supprimer l’utilisateur ID=1 

• JSON (le plus courant)
• XML
• Form Data (pour les formulaires)

 // GET - Récupérer des données async function fetchUsers() { const response = await fetch('https://api.example.com/users'); const users = await response.json(); console.log(users); }

// POST - Créer un utilisateur
async function createUser(userData) {
const response = await fetch('https://api.example.com/users
', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(userData)
});
const newUser = await response.json();
console.log('Utilisateur créé:', newUser);
}

• Query : lire des données.
• Mutation : écrire/modifier.
• Subscription : mises à jour temps réel.
• Schema : définition des types.
• Resolver : exécution des requêtes.

 query GetUsers { users { id name email posts { id title } } }

mutation CreateUser($input: UserInput!) {
createUser(input: $input) {
id
name
email
}
}

 const API_URL = 'https://api.example.com/graphql';

async function graphqlQuery(query, variables = {}) {
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query, variables })
});
return response.json();
}

• Fetch API
• Axios
• Postman
• Swagger/OpenAPI

• Apollo Client
• Relay
• GraphiQL
• Hasura

• Bien utiliser les méthodes HTTP.
• Versionner l’API.
• Mettre en place pagination, filtres, tri.
• Gestion correcte des erreurs.

• Utiliser des fragments pour réutiliser du code.
• Pagination basée sur des curseurs.
• Optimistic UI pour améliorer l’expérience.
• Utiliser des directives conditionnelles.

• API Keys
• JWT
• OAuth 2.0
• Basic Auth

• Validation des entrées côté client et serveur.
• Rate limiting.
• HTTPS obligatoire.

• Utiliser JSONPlaceholder pour afficher, créer, modifier et supprimer des utilisateurs.

• Reprendre l’exercice 1 et le migrer en GraphQL.

• Application de gestion de tâches avec API REST ou GraphQL + Authentification JWT.