🚀 GraphQL Cache ve Subscription Mantığı (RESTful API ile Farkları)

Frontend geliştiriciler olarak genelde API’lerle REST yapısı üzerinden iletişim kurarız. Ancak modern uygulamalarda, daha dinamik, gerçek zamanlı ve esnek veri akışı gerektiğinde GraphQL öne çıkıyor.

Bu yazımda, GraphQL’de cache ve subscription nasıl çalışır,
RESTful API ile farkları nelerdir, örneklerle adım adım deneyimlerimden bahsedicem.

🔹 GraphQL Nedir?

GraphQL, Facebook tarafından geliştirilen bir API sorgulama dilidir.
REST’ten farklı olarak, istemci (frontend) sadece ihtiyacı olan alanları sorgular.
Yani backend ne gönderirse değil, frontend ne isterse onu alır (backend kardeşim işine bak xD ).

🧠 Örnek Fark

REST:

GET /users/1

{
  "id": 1,
  "name": "Ahmet",
  "email": "[email protected]",
  "posts": [
    { "id": 101, "title": "React Eğitimi" },
    { "id": 102, "title": "Next.js Rehberi" }
  ]
}

GraphQL:

query {
  user(id: 1) {
    name
    posts {
      title
    }
  }
}

Sonuç:

{
  "data": {
    "user": {
      "name": "Ahmet",
      "posts": [
        { "title": "React Eğitimi" },
        { "title": "Next.js Rehberi" }
      ]
    }
  }
}

⚙️ GraphQL Temelleri

GraphQL üç temel yapı üzerine kuruludur:

🧩 GraphQL Cache Nedir?

GraphQL’de cache, Apollo Client gibi kütüphaneler tarafından yönetilir.
REST’te olduğu gibi “URL bazlı” değil, veri tipi (type) + id bazlı çalışır.

Örnek:

query {
  users {
    id
    name
  }
}

Yanıt:

{
  "data": {
    "users": [
      { "id": "1", "name": "Ahmet" },
      { "id": "2", "name": "Mehmet" }
    ]
  }
}

Apollo Client bu veriyi bellekte şöyle saklar:

{
  User: {
    "1": { id: "1", name: "Ahmet" },
    "2": { id: "2", name: "Mehmet" }
  }
}

Yani aynı kullanıcı verisi farklı sorgularda tekrar geldiğinde,
Apollo Client veriyi yeniden çekmek yerine cache’ten getirir
ve ayrıca restfull API gibi bir veriyi tekrardan cekmek için gidip 
websocket kurmamız gerekmiyor + bir kütüphane kullanımı olmuyor.

💾 Apollo Client Cache Politikaları

GraphQL’de cache politikası fetchPolicy ile belirlenir:

Örnek kullanım:

useQuery(GET_USERS, {
  fetchPolicy: "cache-first",
});

⚡ Subscription Nedir?

Subscription, GraphQL’in REST’ten en büyük farkıdır.
Gerçek zamanlı veri iletişimi sağlar — tıpkı WebSocket mantığı gibi.

REST’te:

• Veri değiştiğinde client bunu bilmez.
• Yeni veriyi almak için GET /messages gibi istekleri tekrar tekrar atmak gerekir (polling).

GraphQL’de:

• Bir kez “subscribe” olursun,
• Sunucu bir değişiklik olduğunda (örneğin yeni mesaj geldiğinde)
  anında bildirim gönderir.

Örnek:

subscription {
  newMessage {
    id
    text
    sender {
      name
    }
  }
}

🔄 Cache ve Subscription Nasıl Birlikte Çalışır?

GraphQL’in büyülü tarafı burada başlar ✨
Subscription’dan gelen veri, Apollo Client tarafından otomatik olarak cache’e yazılır.
Yani senin UI bileşenin yeni veriyi otomatik olarak gösterir.

Örnek Akış:

1. query { users { id name } } → cache’e kullanıcılar kaydedilir
2. subscription { newUser { id name } } → yeni kullanıcı geldiğinde
3. Apollo cache’e ekler
4. UI bileşeni otomatik güncellenir (manuel state gerekmez)

💻 React Örneği (Apollo Client)

import { gql, useQuery, useSubscription } from "@apollo/client";

const GET_USERS = gql`
  query {
    users {
      id
      name
    }
  }
`;

const NEW_USER_SUB = gql`
  subscription {
    newUser {
      id
      name
    }
  }
`;

export default function Users() {
  const { data, loading } = useQuery(GET_USERS);

  useSubscription(NEW_USER_SUB, {
    onData: ({ client, data }) => {
      const newUser = data.data.newUser;
      client.cache.modify({
        fields: {
          users(existingUsers = []) {
            const newUserRef = client.cache.writeFragment({
              data: newUser,
              fragment: gql`
                fragment NewUser on User {
                  id
                  name
                }
              `,
            });
            return [...existingUsers, newUserRef];
          },
        },
      });
    },
  });

  if (loading) return <p>Yükleniyor...</p>;

  return (
    <ul>
      {data.users.map((u) => (
        <li key={u.id}>{u.name}</li>
      ))}
    </ul>
  );
}

Bu kodda:

• useQuery() ilk veriyi çeker
• useSubscription() yeni kullanıcıları dinler
• Yeni veri geldiğinde Apollo cache’e ekler
• React bileşeni otomatik olarak yeniden render edilir 🔁

🔍 REST vs GraphQL Karşılaştırması

🧠 Özet

• Cache: Apollo Client verileri bellek içinde type + id bazlı saklar.
• Subscription: WebSocket üzerinden gerçek zamanlı veri alır.
• Birlikte: Gelen veriler cache’e otomatik eklenir, UI anında güncellenir.

Bu sayede:
✅ Fazladan API isteği atmazsın
✅ State yönetimi basitleşir
✅ Gerçek zamanlı bir kullanıcı deneyimi sunarsın

✍️ Son Demmm!

GraphQL, REST’ten daha karmaşık görünse de,
cache ve subscription özellikleriyle modern frontend dünyasında
daha hızlı, daha verimli ve gerçek zamanlı uygulamalar geliştirmeni sağlar.

Artık REST’te olduğu gibi “sayfayı yenilemeden” veriyi güncelleyen,
gerçek zamanlı sistemler oluşturabilirsin hadi hayırlara vesile olsun. ⚡