Bir GraphQL API'sini nasıl cache'lersiniz?

Question

IT Interview Practice · Accepted Answer

GraphQL'i cache'lemek REST'ten daha zordur, çünkü tek bir endpoint vardır ve istekler genellikle POST'tur, dolayısıyla URL tabanlı HTTP caching kutudan çıktığı gibi çalışmaz. Bunun yerine üç katmanda cache yaparsınız: **istemci**, **transport/CDN** ve **sunucu**.

## Normalize edilmiş istemci cache'i

Apollo Client ve Relay, sonuçları `__typename` + `id` ile anahtarlanan bir **normalize edilmiş cache**'te saklar. Her nesne bir kez saklanır; aynı `User:1`'e referans veren farklı sorgular onu paylaşır, böylece bir varlığı güncelleyen bir mutation her görünümü otomatik olarak yeniler.

```graphql
# Both queries write to the same normalized entry User:1 in the client cache
query A { user(id: "1") { id name } }
query B { post(id: "9") { author { id name } } }  # author is also User:1
```

Alanların `id` döndürmesi gerekmesinin nedeni budur — cache'in tekilleştirme (deduplicate) için sabit bir anahtara ihtiyacı vardır.

## Persisted query'ler + CDN

**Persisted query'ler**, sorgu dizesini bir hash ile değiştirir. İstemci, uzun bir POST gövdesi yerine kısa bir hash gönderir; sunucu kayıtlı sorguyu arar.

```js
// Automatic Persisted Queries: first a tiny GET with just the hash
// GET /graphql?extensions={"persistedQuery":{"sha256Hash":"abc..."}}
// -> because it's a GET with a stable key, a CDN can cache the RESPONSE at the edge
```

Okuma sorgularını cache'lenebilir GET'lere dönüştürmek, bir **CDN**'in bunları edge'de sunmasına olanak tanır ve yükleri küçültür. `@cacheControl` ipuçları (max-age, scope), sunucunun CDN ve Apollo sunucu cache'inin uyduğu alan başına TTL'ler bildirmesini sağlar.

## Sunucu tarafı

Sorgu + değişkenler + auth kapsamı ile anahtarlanmış bir yanıt cache'i (örneğin Apollo'nunki) resolver'ları yeniden çalıştırmayı önler; DataLoader ise istek başına tekilleştirmeyi ele alır (farklı bir konu — bir çapraz-istek cache'i değildir).

## Neden önemli

Tek endpoint/POST tasarımı naif HTTP caching'i bozar, bu yüzden mülakatçılar **katmanlı** yanıtı duymak ister: istemcide normalize edilmiş varlık cache'i, CDN/edge caching'i açmak için persisted query'ler + `@cacheControl`, ve DataLoader'ın nereye oturduğu (istek başına, çapraz-istek değil).

Normalize edilmiş istemci cache'i

Persisted query'ler + CDN

Sunucu tarafı

Neden önemli

İlgili sorular