GraphQL Subscriptions in Angular using Apollo 2.0: Gerçek Zamanlı Uygulamalar İçin Kapsamlı Bir Rehber

GraphQL Subscriptions in Angular using Apollo 2.0: Gerçek Zamanlı Uygulamalar İçin Kapsamlı Bir Rehber

Modern web uygulamaları, kullanıcılarına dinamik ve gerçek zamanlı deneyimler sunma ihtiyacı duymaktadır. Sohbet uygulamaları, canlı bildirimler, spor skorları veya finansal piyasa verileri gibi senaryolarda, sunucudaki bir veri değişikliğinin anında istemciye iletilmesi kritik öneme sahiptir. Geleneksel HTTP tabanlı yaklaşımlar bu tür gereksinimleri karşılamakta zorlanırken, GraphQL Subscriptions (Abonelikler) bu boşluğu doldurur.

Bu makale, Angular çerçevesi ve Apollo Client 2.0 (veya ilgili sürümleri) kullanarak GraphQL Subscriptions’ı nasıl uygulayacağınızı adım adım açıklamaktadır. GraphQL Subscriptions’ın temellerinden başlayarak, Apollo Client ile Angular entegrasyonuna, WebSocket bağlantısının kurulmasına, aboneliklerin Angular bileşenlerinde nasıl kullanılacağına ve son olarak gelişmiş konular ile en iyi uygulamalara değineceğiz. Amacımız, Angular uygulamalarınızda gerçek zamanlı veri akışını kolayca entegre etmenizi sağlayacak kapsamlı bir rehber sunmaktır.

GraphQL Subscriptions Nedir?

GraphQL, API’ler için bir sorgu dili ve çalışma zamanı olup, istemcilerin tam olarak ihtiyaç duydukları veriyi talep etmelerine olanak tanır. GraphQL’in üç ana işlem türü vardır:

• Query (Sorgu): Veri okuma işlemleri için kullanılır. Tek seferlik veri çekme talepleridir.
• Mutation (Değişiklik): Veri yazma, güncelleme veya silme işlemleri için kullanılır. Sunucu tarafında veri değişikliği yapar.
• Subscription (Abonelik): Gerçek zamanlı veri akışı için kullanılır. İstemci, belirli bir olaya abone olur ve bu olay her gerçekleştiğinde sunucu, güncel veriyi istemciye iter.

Geleneksel Yaklaşımlar ve Kısıtlamaları

Gerçek zamanlı veri güncellemeleri ihtiyacı, web geliştirmenin ilk günlerinden beri mevcuttu. Ancak, HTTP’nin bağlantısız (stateless) yapısı bu tür senaryolar için doğal bir çözüm sunmaz. Geleneksel olarak kullanılan bazı yaklaşımlar ve bunların kısıtlamaları şunlardır:

• Polling (Yoklama): İstemci, belirli aralıklarla sunucuya yeni veri olup olmadığını sormak için sürekli HTTP istekleri gönderir. Bu yöntem, sunucu ve istemci kaynaklarını verimsiz kullanır, gereksiz trafik oluşturur ve güncellemelerde gecikmelere neden olabilir.
• Long Polling (Uzun Yoklama): İstemci bir istek gönderir ve sunucu, yeni veri olana kadar cevabı açık tutar. Veri geldiğinde cevap gönderilir ve istemci hemen yeni bir istek başlatır. Polling’e göre daha verimlidir ancak yine de bağlantı yönetimi karmaşıktır ve sunucu kaynaklarını meşgul edebilir.
• Server-Sent Events (SSE): Sunucudan istemciye tek yönlü, sürekli bir bağlantı üzerinden veri akışı sağlar. Tarayıcı desteği iyidir, ancak istemciden sunucuya veri gönderme yeteneği sınırlıdır ve ikili veri aktarımı için uygun değildir.
• Raw WebSockets: İstemci ve sunucu arasında çift yönlü, kalıcı bir bağlantı kurar. Gerçek zamanlı iletişim için idealdir ancak bağlantı yönetimi, mesaj formatlama, yeniden bağlantı kurma gibi detayları manuel olarak ele almak gerekir, bu da geliştirme sürecini karmaşıklaştırır.

Subscriptions’ın Temelleri

GraphQL Subscriptions, WebSockets teknolojisinin üzerine inşa edilmiştir ancak GraphQL’in deklaratif yapısını kullanarak bu karmaşıklığı soyutlar. Bir istemci bir abonelik başlattığında:

1. İstemci, sunucuya bir WebSocket bağlantısı kurar.
2. İstemci, GraphQL şemasına uygun bir abonelik sorgusu (subscription query) gönderir.
3. Sunucu, bu aboneliği kaydeder ve belirli bir olay (örneğin, yeni bir mesajın veritabanına kaydedilmesi) gerçekleştiğinde, abone olan tüm istemcilere güncel veriyi WebSocket bağlantısı üzerinden iter.
4. İstemci, gelen veriyi alır ve kullanıcı arayüzünü günceller.

Bu yaklaşım, istemcinin sunucudan sürekli veri çekme ihtiyacını ortadan kaldırır ve yalnızca ilgili olaylar meydana geldiğinde veri almasını sağlar. Bu, hem ağ trafiğini azaltır hem de daha duyarlı ve verimli uygulamalar geliştirilmesine olanak tanır.

Apollo Client ve Angular Entegrasyonu

Apollo Client, GraphQL API’leri ile etkileşim kurmak için kapsamlı bir istemci kütüphanesidir. Veri çekme, önbellekleme, durum yönetimi ve UI güncellemeleri gibi birçok karmaşık görevi basitleştirir. Angular uygulamalarında Apollo Client kullanmak için ise Apollo Angular kütüphanesi kullanılır.

Apollo Client Nedir?

Apollo Client, JavaScript uygulamaları için GraphQL verilerini yönetmek ve önbelleğe almak için tasarlanmış, topluluk tarafından desteklenen bir kütüphanedir. Temel özellikleri şunlardır:

• Deklaratif Veri Çekme: GraphQL sorgularını doğrudan UI bileşenlerinizde tanımlamanıza olanak tanır.
• Akıllı Önbellekleme: Çekilen veriyi otomatik olarak önbelleğe alır, böylece aynı veri tekrar istendiğinde ağ isteği yapmadan hızlıca dönebilir.
• Reaktif Veri Akışı: Veri değişikliklerini izler ve UI’yi otomatik olarak günceller.
• Genişletilebilir Link Sistemi: HTTP, WebSocket, hata yönetimi, kimlik doğrulama gibi farklı protokoller ve işlevler için özelleştirilebilir “link”ler aracılığıyla sunucuyla iletişim kurar.

Apollo Angular

Apollo Angular, Apollo Client’ı Angular uygulamalarına sorunsuz bir şekilde entegre etmek için tasarlanmış resmi bir kütüphanedir. Angular’ın reaktif programlama (RxJS) paradigmasıyla uyumlu çalışır ve GraphQL işlemlerini Observable’lar olarak döndürür. Bu sayede, Angular’ın yaşam döngüsü ve değişiklik algılama mekanizmalarıyla kolayca entegre edilebilir.

Kurulum ve Temel Yapılandırma

Angular uygulamanıza Apollo Client ve Apollo Angular’ı eklemek için aşağıdaki adımları izleyin. Bu adımlar, Apollo Client 2.x ve subscriptions-transport-ws kütüphanesinin kullanıldığı dönemi yansıtmaktadır.

Öncelikle gerekli paketleri yükleyin:

npm install apollo-angular @apollo/client graphql-tag graphql subscriptions-transport-ws apollo-link-ws apollo-link-http apollo-link

Bu paketlerin açıklamaları:

• apollo-angular: Angular için Apollo Client entegrasyonu.
• @apollo/client: Apollo Client’ın ana paketi (eski adıyla apollo-client).
• graphql-tag: GraphQL sorgularını JavaScript şablon dizileriyle ayrıştırmak için kullanılır.
• graphql: GraphQL’in temel tür tanımları ve yardımcı araçları.
• subscriptions-transport-ws: WebSocket üzerinden GraphQL aboneliklerini taşımak için kullanılan kütüphane. Apollo Client 2.x döneminde standarttı.
• apollo-link-ws: subscriptions-transport-ws ile Apollo Client arasında köprü kuran link.
• apollo-link-http: HTTP üzerinden sorgu ve değişiklik göndermek için kullanılan link.
• apollo-link: Farklı linkleri birleştirmek ve operasyonları yönlendirmek için kullanılan ana link paketi.

Ardından, Angular uygulamanızın AppModule‘ünde veya özel bir GraphQL modülünde Apollo Client’ı yapılandırmanız gerekir. Bu yapılandırma, HTTP ve WebSocket bağlantılarını birleştirecektir.

// src/app/graphql.module.ts (veya app.module.ts)
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { HttpLink } from 'apollo-link-http';
import { WebSocketLink } from 'apollo-link-ws';
import { split } from 'apollo-link';
import { getMainDefinition } from '@apollo/client/utilities';

const uri = 'http://localhost:4000/graphql'; // GraphQL HTTP endpoint
const wsUri = 'ws://localhost:4000/graphql'; // GraphQL WebSocket endpoint

export function createApollo(httpLink: HttpLink) {
  // HTTP Link: Sorgu ve değişiklikler için
  const http = httpLink.create({ uri });

  // WebSocket Link: Abonelikler için
  const ws = new WebSocketLink({
    uri: wsUri,
    options: {
      reconnect: true, // Bağlantı kesildiğinde otomatik yeniden bağlan
      connectionParams: {
        // İsteğe bağlı: WebSocket bağlantısı kurulurken sunucuya gönderilecek parametreler (örn. kimlik doğrulama tokenı)
        authToken: localStorage.getItem('token'),
      },
    },
  });

  // 'split' fonksiyonu, operasyon türüne göre doğru linki seçer
  // Abonelikler için WebSocket linkini, diğerleri için HTTP linkini kullanır
  const link = split(
    // İlk parametre: Test fonksiyonu. Operasyon bir abonelik mi?
    ({ query }) => {
      const definition = getMainDefinition(query);
      return (
        definition.kind === 'OperationDefinition' &&
        definition.operation === 'subscription'
      );
    },
    ws,   // Abonelik ise WebSocket linkini kullan
    http  // Değilse HTTP linkini kullan
  );

  return {
    link: link,
    cache: new InMemoryCache(), // Verileri önbelleğe almak için
  } as ApolloClientOptions;
}

@NgModule({
  imports: [HttpClientModule, ApolloModule],
  providers: [
    HttpLink,
    {
      provide: APOLLO_OPTIONS,
      useFactory: createApollo,
      deps: [HttpLink],
    },
  ],
})
export class GraphQLModule {}

Bu GraphQLModule‘ü, AppModule‘ünüze import etmeyi unutmayın:

// src/app/app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { GraphQLModule } from './graphql.module'; // GraphQL modülünüzü import edin

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    GraphQLModule, // Buraya ekleyin
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

Subscription Bağlantısının Kurulması

Yukarıdaki yapılandırma bölümünde temel olarak değinilmiş olsa da, Subscription bağlantısının nasıl kurulduğunu ve neden split fonksiyonunun kullanıldığını daha detaylı inceleyelim.

WebSocket Link

GraphQL Subscriptions, WebSockets üzerinden çalıştığı için Apollo Client’ın bir WebSocket bağlantısı kurması ve yönetmesi gerekir. Bu, apollo-link-ws paketinden gelen WebSocketLink ile sağlanır. WebSocketLink, subscriptions-transport-ws kütüphanesini temel alır ve bir WebSocket bağlantısını yönetmek için gerekli tüm mantığı içerir.

import { WebSocketLink } from 'apollo-link-ws';

const ws = new WebSocketLink({
  uri: 'ws://localhost:4000/graphql', // WebSocket endpoint'inizin adresi
  options: {
    reconnect: true, // Bağlantı koptuğunda otomatik yeniden bağlanmayı dener
    timeout: 30000,  // Yeniden bağlantı denemeleri arasındaki maksimum bekleme süresi
    connectionParams: {
      // WebSocket bağlantısı kurulurken sunucuya gönderilecek parametreler
      // Genellikle kimlik doğrulama tokenları veya diğer başlangıç verileri buraya konulur.
      authToken: localStorage.getItem('token'),
    },
  },
});

options içindeki reconnect: true ayarı çok önemlidir. Bu, ağ kesintileri veya sunucu yeniden başlatmaları durumunda istemcinin otomatik olarak WebSocket bağlantısını yeniden kurmaya çalışmasını sağlar, bu da uygulamanın dayanıklılığını artırır.

Apollo Client’ı Yapılandırma: Split Fonksiyonu

Bir GraphQL API genellikle hem HTTP (sorgu ve değişiklikler için) hem de WebSocket (abonelikler için) protokollerini kullanır. Apollo Client’ın doğru operasyon türü için doğru bağlantıyı kullanmasını sağlamak için apollo-link paketinden split fonksiyonunu kullanırız.

split fonksiyonu üç argüman alır:

1. Test Fonksiyonu: Gelen GraphQL operasyonunun bir abonelik olup olmadığını kontrol eden bir fonksiyondur. Bu fonksiyon, operasyonun kind ve operation özelliklerini kontrol ederek karar verir. getMainDefinition yardımcı fonksiyonu, bir GraphQL dökümanındaki ana operasyon tanımını kolayca almanızı sağlar.
2. True Durumu Linki: Test fonksiyonu true döndürürse kullanılacak link (yani WebSocket linki).
3. False Durumu Linki: Test fonksiyonu false döndürürse kullanılacak link (yani HTTP linki).

import { split } from 'apollo-link';
import { getMainDefinition } from '@apollo/client/utilities'; // Veya 'apollo-utilities' eski versiyonlarda

const link = split(
  ({ query }) => {
    const definition = getMainDefinition(query);
    return (
      definition.kind === 'OperationDefinition' &&
      definition.operation === 'subscription'
    );
  },
  ws,   // Abonelik ise WebSocket linkini kullan
  http  // Değilse HTTP linkini kullan
);

Bu yapılandırma sayesinde, Apollo Client otomatik olarak doğru protokolü kullanarak GraphQL operasyonlarını sunucuya gönderir. Bu, geliştiricinin her operasyon için hangi protokolü kullanacağını manuel olarak belirtme ihtiyacını ortadan kaldırır ve kodun temizliğini artırır.

Angular Uygulamasında Subscription Kullanımı

Apollo Client yapılandırması tamamlandıktan sonra, Angular bileşenlerinizde GraphQL aboneliklerini kullanmaya başlayabilirsiniz.

GraphQL Şeması

Sunucu tarafında bir GraphQL aboneliği tanımlanmış olmalıdır. Örneğin, yeni bir yorum eklendiğinde bildirim almak için aşağıdaki gibi bir şema tanımı olabilir:

type Comment {
  id: ID!
  content: String!
  author: String!
}

type Subscription {
  newCommentAdded: Comment!
  commentCountUpdated: Int!
}

Bu şemada, newCommentAdded aboneliği, her yeni yorum eklendiğinde bir Comment nesnesini istemciye gönderecektir.

Angular Bileşeninde Subscription Oluşturma

Bir Angular bileşeninde abonelik kullanmak için, Apollo servisini enjekte etmeniz ve apollo.subscribe() metodunu kullanmanız gerekir.

// src/app/comment-list/comment-list.component.ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { Subscription } from 'rxjs';

interface Comment {
  id: string;
  content: string;
  author: string;
}

interface NewCommentAddedSubscription {
  newCommentAdded: Comment;
}

@Component({
  selector: 'app-comment-list',
  templateUrl: './comment-list.component.html',
  styleUrls: ['./comment-list.component.css'],
})
export class CommentListComponent implements OnInit, OnDestroy {
  comments: Comment[] = [];
  private commentsSubscription: Subscription;

  constructor(private apollo: Apollo) {}

  ngOnInit() {
    // Mevcut yorumları yüklemek için bir sorgu da ekleyebilirsiniz
    this.apollo
      .query<{ comments: Comment[] }>({
        query: gql
          query GetComments {
            comments {
              id
              content
              author
            }
          }
        ,
      })
      .subscribe(({ data }) => {
        this.comments = data.comments;
      });

    // Yeni yorumlar için abonelik başlatma
    const NEW_COMMENT_ADDED_SUBSCRIPTION = gql
      subscription NewCommentAdded {
        newCommentAdded {
          id
          content
          author
        }
      }
    ;

    this.commentsSubscription = this.apollo
      .subscribe({
        query: NEW_COMMENT_ADDED_SUBSCRIPTION,
      })
      .subscribe({
        next: ({ data }) => {
          if (data && data.newCommentAdded) {
            this.comments = [...this.comments, data.newCommentAdded];
            console.log('Yeni yorum eklendi:', data.newCommentAdded);
          }
        },
        error: (error) => {
          console.error('Abonelik hatası:', error);
        },
        complete: () => {
          console.log('Abonelik tamamlandı (genellikle hiç olmaz).');
        },
      });
  }

  ngOnDestroy() {
    // Bellek sızıntılarını önlemek için aboneliği sonlandırın
    if (this.commentsSubscription) {
      this.commentsSubscription.unsubscribe();
    }
  }
}

Gerçek Zamanlı Veri Güncellemesi

Yukarıdaki örnekte, apollo.subscribe() metodundan dönen Observable’a abone olduk. next callback fonksiyonu, sunucudan her yeni veri geldiğinde tetiklenir. Bu callback içinde, gelen yeni yorumu mevcut yorumlar dizisine ekleyerek kullanıcı arayüzünü güncelliyoruz.

İlgili HTML şablonu (comment-list.component.html) şöyle görünebilir:

Yorumlar

  

    {{ comment.author }}: {{ comment.content }}
  

Bu kurulumla, sunucuda yeni bir yorum eklendiğinde (bir mutation tetiklendiğinde ve sunucu tarafında subscription olayı yayınlandığında), Angular uygulamanız anında bu yeni yorumu alacak ve listeye ekleyecektir, herhangi bir sayfa yenilemeye veya manuel veri çekmeye gerek kalmadan.

Gelişmiş Konular ve En İyi Uygulamalar

GraphQL Subscriptions’ı Angular uygulamalarınızda kullanırken dikkate almanız gereken bazı gelişmiş konular ve en iyi uygulamalar bulunmaktadır.

Bağlantı Yönetimi ve Hata Yakalama

WebSocket bağlantıları kararsız olabilir. Ağ kesintileri, sunucu sorunları veya istemcinin çevrimdışı olması gibi durumlar bağlantının kopmasına neden olabilir. WebSocketLink‘in options içindeki reconnect: true ayarı, çoğu durumda otomatik yeniden bağlantıyı sağlar. Ancak, daha karmaşık hata senaryolarını ele almak için apollo.subscribe() metodunun error callback’ini kullanabilirsiniz. Bu callback, abonelik sırasında oluşan hataları (örneğin, sunucu tarafında bir hata) yakalamanıza olanak tanır.

Ayrıca, Apollo Client’ın onError linkini kullanarak genel hata yönetimi stratejileri oluşturabilirsiniz. Bu link, hem HTTP hem de WebSocket operasyonlarındaki hataları merkezi bir yerden yakalamak için kullanılabilir.

import { onError } from 'apollo-link-error';

const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        [GraphQL Hata]: Mesaj: ${message}, Konum: ${locations}, Yol: ${path}
      )
    );
  }
  if (networkError) console.log([Ağ Hatası]: ${networkError});
});

// Link zincirine errorLink'i ekleyin
const link = split(
  // ... test fonksiyonu ...
  ws,
  http
);
// errorLink'i en başa ekleyerek tüm hataları yakalayabiliriz
const finalLink = errorLink.concat(link);
// ApolloClientOptions'a finalLink'i verin

Kimlik Doğrulama (Authentication)

Gerçek zamanlı uygulamalarda genellikle kullanıcı kimlik doğrulaması gerekir. WebSocket bağlantısı kurulurken kimlik doğrulama tokenını sunucuya göndermek için WebSocketLink‘in connectionParams özelliğini kullanabilirsiniz:

const ws = new WebSocketLink({
  uri: wsUri,
  options: {
    reconnect: true,
    connectionParams: () => { // Dinamik olarak token almak için bir fonksiyon kullanın
      return {
        authToken: localStorage.getItem('token'), // Token'ı localStorage'dan alın
      };
    },
  },
});

Sunucu tarafında, WebSocket bağlantısı kurulurken bu connectionParams‘ı alıp kullanıcının kimliğini doğrulamanız ve yalnızca yetkili kullanıcıların abonelikleri başlatmasına izin vermeniz gerekir.

Veri Yönetimi ve Önbellekleme

Apollo Client’ın InMemoryCache‘i, sorgu ve değişiklik sonuçlarını otomatik olarak önbelleğe alır. Aboneliklerden gelen veriler de genellikle bu önbelleği etkiler. Eğer bir abonelik, mevcut bir verinin güncellenmiş halini getiriyorsa (örneğin, bir kullanıcının durumunun değişmesi), Apollo Cache bunu otomatik olarak güncelleyebilir. Ancak, abonelik yeni bir öğe ekliyorsa (örneğin, yeni bir yorum), bu öğeyi mevcut bir listeye eklemek için önbelleği manuel olarak güncellemeniz gerekebilir.

Bunu yapmak için apollo.subscribe() içindeki update callback’ini kullanabilirsiniz. Ancak, çoğu zaman, Angular bileşeninde yaptığımız gibi doğrudan bileşenin veri dizisini güncellemek yeterli ve daha basittir.

Performans ve Ölçeklenebilirlik

Gerçek zamanlı uygulamalar, özellikle çok sayıda eşzamanlı abone olduğunda, sunucu tarafında performans zorlukları yaratabilir. Sunucu tarafında abonelikleri ölçeklendirmek için:

• Pub/Sub (Yayınla/Abone Ol) Mekanizmaları: Redis Pub/Sub veya Apache Kafka gibi mesaj kuyrukları kullanarak olayları farklı sunucu örnekleri arasında dağıtabilirsiniz. GraphQL sunucunuz, bir olayı bu mesaj kuyruğuna yayınlar ve tüm ilgili abonelik sunucuları bu olayları dinleyerek istemcilere iletir.
• Verimli WebSocket Sunucuları: Node.js tabanlı uygulamalar için ws veya socket.io gibi kütüphaneler, binlerce eşzamanlı WebSocket bağlantısını yönetebilir.
• Verimli Veritabanı İzleme: Veritabanındaki değişiklikleri algılamak için verimli mekanizmalar kullanın (örneğin, PostgreSQL’deki LISTEN/NOTIFY veya MongoDB’deki Change Streams).

İstemci tarafında ise, gereksiz aboneliklerden kaçınmak ve bileşenler yok edildiğinde abonelikleri düzgün bir şekilde sonlandırmak (unsubscribe()) önemlidir. Aksi takdirde, bellek sızıntıları ve gereksiz ağ trafiği oluşabilir.

Örnek Senaryolar

GraphQL Subscriptions’ın kullanılabileceği bazı yaygın senaryolar:

• Sohbet Uygulaması: Yeni mesajların anında tüm katılımcılara iletilmesi.
• Canlı Bildirimler: Bir kullanıcının yeni bir takipçi, beğeni veya yorum aldığında anında bildirim alması.
• Gerçek Zamanlı Analitik Panoları: Veri akışındaki değişikliklerin veya metriklerin anında güncellenmesi.
• Oyun Durumu Güncellemeleri: Çok oyunculu oyunlarda oyuncu pozisyonlarının veya oyun durumu değişikliklerinin anında senkronize edilmesi.
• Finansal Piyasalar: Hisse senedi fiyatları veya kripto para birimi kurlarının gerçek zamanlı olarak güncellenmesi.

Bu senaryolar, aboneliklerin kullanıcı deneyimini nasıl zenginleştirebileceğini ve uygulamaların daha dinamik hale gelmesini sağlayabileceğini göstermektedir.

Sonuç

GraphQL Subscriptions, modern web uygulamalarında gerçek zamanlı veri akışını sağlamak için güçlü ve zarif bir çözümdür. Geleneksel HTTP tabanlı yaklaşımların sınırlamalarını aşarak, istemcilerin sunucudaki olaylara abone olmasına ve bu olaylar gerçekleştiğinde anında güncel veriyi almasına olanak tanır.

Angular ve Apollo Client 2.0 (veya ilgili sürümleri) ile GraphQL Subscriptions’ı entegre etmek, apollo-angular, apollo-link-ws ve subscriptions-transport-ws gibi kütüphaneler sayesinde oldukça basittir. split fonksiyonu, HTTP ve WebSocket bağlantılarını sorunsuz bir şekilde birleştirerek geliştiricilerin operasyon türüne göre doğru protokolü kullanma karmaşıklığından kurtarır.

Bu makalede sunulan adımları ve en iyi uygulamaları takip ederek, Angular uygulamalarınıza gerçek zamanlı yetenekler ekleyebilir, kullanıcı deneyimini önemli ölçüde geliştirebilir ve daha etkileşimli, dinamik uygulamalar oluşturabilirsiniz. Gerçek zamanlı veri akışı, modern web geliştirmenin vazgeçilmez bir parçası haline gelmiştir ve GraphQL Subscriptions bu alanda lider çözümlerden biridir.