Comment mettre en cache une API GraphQL ?

Question

IT Interview Practice · Accepted Answer

Mettre GraphQL en cache est plus difficile que REST, car il n'y a qu'un seul endpoint et les requêtes sont généralement en POST, si bien que le caching HTTP basé sur l'URL ne fonctionne pas d'emblée. À la place, vous mettez en cache à trois niveaux : **client**, **transport/CDN** et **serveur**.

## Cache client normalisé

Apollo Client et Relay stockent les résultats dans un **cache normalisé** indexé par `__typename` + `id`. Chaque objet est stocké une seule fois ; différentes requêtes qui référencent le même `User:1` le partagent, si bien qu'une mutation mettant à jour une entité rafraîchit automatiquement toutes les vues.

```graphql
# Les deux requêtes écrivent dans la même entrée normalisée User:1 du cache client
query A { user(id: "1") { id name } }
query B { post(id: "9") { author { id name } } }  # author est aussi User:1
```

Voilà pourquoi les champs devraient renvoyer `id` — le cache a besoin d'une clé stable pour dédupliquer.

## Persisted queries + CDN

Les **persisted queries** remplacent la chaîne de requête par un hash. Le client envoie un hash court au lieu d'un long corps POST ; le serveur retrouve la requête enregistrée.

```js
// Automatic Persisted Queries : d'abord un minuscule GET avec seulement le hash
// GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc..."}}
// -> comme c'est un GET avec une clé stable, un CDN peut mettre la RÉPONSE en cache en périphérie
```

Transformer les requêtes de lecture en GET cachables permet à un **CDN** de les servir en périphérie et réduit la taille des charges utiles. Les indications `@cacheControl` (max-age, scope) laissent le serveur déclarer des TTL par champ que le CDN et le cache serveur Apollo respectent.

## Côté serveur

Un cache de réponses (par exemple celui d'Apollo) indexé par la requête + les variables + le scope d'auth évite de ré-exécuter les resolvers ; DataLoader gère la déduplication au sein d'une requête (une préoccupation différente — ce n'est pas un cache inter-requêtes).

## Pourquoi c'est important

La conception à endpoint unique/POST casse le caching HTTP naïf, si bien que les recruteurs veulent entendre la réponse **en couches** : cache d'entités normalisé côté client, persisted queries + `@cacheControl` pour débloquer le caching CDN/périphérie, et où se situe DataLoader (par requête, pas inter-requêtes).

Cache client normalisé

Persisted queries + CDN

Côté serveur

Pourquoi c'est important

Questions connexes