Hoe cache je een GraphQL-API?

Question

IT Interview Practice · Accepted Answer

GraphQL cachen is lastiger dan REST omdat er één endpoint is en requests meestal POST zijn, waardoor URL-gebaseerde HTTP-caching niet out of the box werkt. Je cachet in plaats daarvan op drie lagen: **client**, **transport/CDN** en **server**.

## Genormaliseerde client-cache

Apollo Client en Relay slaan resultaten op in een **genormaliseerde cache** met als key `__typename` + `id`. Elk object wordt één keer opgeslagen; verschillende queries die naar dezelfde `User:1` verwijzen, delen hem, zodat een mutation die één entiteit bijwerkt automatisch elke view ververst.

```graphql
# Beide queries schrijven naar dezelfde genormaliseerde entry User:1 in de client-cache
query A { user(id: "1") { id name } }
query B { post(id: "9") { author { id name } } }  # author is ook User:1
```

Daarom zouden velden `id` moeten teruggeven — de cache heeft een stabiele key nodig om te dedupliceren.

## Persisted queries + CDN

**Persisted queries** vervangen de query-string door een hash. De client verstuurt een korte hash in plaats van een lange POST-body; de server zoekt de geregistreerde query op.

```js
// Automatic Persisted Queries: eerst een piepkleine GET met alleen de hash
// GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc..."}}
// -> omdat het een GET met een stabiele key is, kan een CDN de RESPONSE aan de edge cachen
```

Read-queries omzetten naar cachebare GETs laat een **CDN** ze aan de edge serveren, en verkleint de payloads. `@cacheControl`-hints (max-age, scope) laten de server per veld een TTL declareren die de CDN en de Apollo-server-cache respecteren.

## Server-side

Een response-cache (bijv. die van Apollo) met als key de query + variables + auth-scope voorkomt dat resolvers opnieuw draaien; DataLoader verzorgt de-duplicatie per request (een andere zorg — het is geen cross-request cache).

## Waarom het belangrijk is

Het ontwerp met één endpoint/POST breekt naïeve HTTP-caching, dus interviewers willen het **gelaagde** antwoord horen: een genormaliseerde entity-cache op de client, persisted queries + `@cacheControl` om CDN-/edge-caching te ontsluiten, en waar DataLoader past (per request, niet cross-request).

Genormaliseerde client-cache

Persisted queries + CDN

Server-side

Waarom het belangrijk is

Gerelateerde vragen