GraphQL Entegrasyonu
GraphQL entegrasyonu, Angular uygulamalarında veri yönetimini daha esnek ve verimli hale getiren modern bir yaklaşımdır. REST API’lerin aksine, GraphQL ile istemci sadece ihtiyacı olan alanları sorgular ve bu sayede gereksiz veri transferi engellenir. Bu özellik, karmaşık bileşen yapısına sahip Angular uygulamalarında özellikle önemlidir, çünkü state yönetimi, veri akışı ve lifecycle kontrolü uygulamanın performansı ve ölçeklenebilirliği açısından kritik rol oynar.
Angular geliştirme sürecinde GraphQL entegrasyonu genellikle Apollo Angular kütüphanesi üzerinden gerçekleştirilir. Apollo Angular, queries, mutations ve subscriptions işlemlerini Observable tabanlı reaktif bir yaklaşımla sunar. Bu sayede bileşenler veri değişikliklerine otomatik olarak yanıt verebilir ve sayfa yeniden yüklemeden UI güncellenebilir. Öğrenciler bu süreçte yeniden kullanılabilir bileşenler oluşturmayı, iş mantığını sunumdan ayırmayı, hata yönetimini ve veri önbellekleme optimizasyonlarını öğreneceklerdir.
Modern SPA’larda bu yaklaşım, state yönetimi ve performans açısından büyük avantaj sağlar. GraphQL entegrasyonunu Angular ile etkili bir şekilde kullanabilen geliştiriciler, yüksek performanslı, ölçeklenebilir ve bakımı kolay kullanıcı arayüzleri oluşturabilirler.
Temel Örnek
typescriptimport { Component, OnInit } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
const GET_USERS = gql` query GetUsers {
users {
id
name
email
}
}`;
@Component({
selector: 'app-user-list',
template: ` <h2>Kullanıcı Listesi</h2> <ul> <li *ngFor="let user of users$ | async">
{{ user.name }} - {{ user.email }} </li> </ul>
`
})
export class UserListComponent implements OnInit {
users$: Observable<any[]>;
constructor(private apollo: Apollo) {}
ngOnInit(): void {
this.users$ = this.apollo.watchQuery<any>({
query: GET_USERS
}).valueChanges.pipe(
map(result => result.data.users)
);
}
}Bu örnekte, UserListComponent Apollo Angular kullanarak GET_USERS sorgusunu çalıştırır ve yalnızca id, name ve email alanlarını alır. watchQuery fonksiyonu bir Observable döndürür ve bu Observable async pipe ile template’e bağlanır. Bu sayede reactive bir veri akışı sağlanır ve gereksiz renderlar önlenir.
ngOnInit lifecycle hook’u sorgunun doğru zamanda çalışmasını sağlar. Bu yapı, veri mantığını sunumdan ayırarak bileşenlerin yeniden kullanılabilir olmasını destekler. Ayrıca prop drilling ve gereksiz re-render gibi yaygın sorunları önler. Angular standartlarına uygun olarak bu yaklaşım, büyük ve karmaşık SPA’larda performans ve sürdürülebilirlik açısından kritik öneme sahiptir.
Pratik Örnek
typescriptimport { Component, OnInit } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { Observable, of } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
const GET_POSTS = gql` query GetPosts($limit: Int!) {
posts(limit: $limit) {
id
title
author {
name
}
}
}`;
@Component({
selector: 'app-post-list',
template: ` <h2>Post Listesi</h2> <ul> <li *ngFor="let post of posts$ | async"> <strong>{{ post.title }}</strong> - {{ post.author.name }} </li> </ul> <p *ngIf="errorMessage">{{ errorMessage }}</p>
`
})
export class PostListComponent implements OnInit {
posts$: Observable<any[]>;
errorMessage: string;
constructor(private apollo: Apollo) {}
ngOnInit(): void {
this.posts$ = this.apollo.watchQuery<any>({
query: GET_POSTS,
variables: { limit: 10 }
}).valueChanges.pipe(
map(result => result.data.posts),
catchError(err => {
this.errorMessage = 'Postlar yüklenirken hata oluştu';
console.error(err);
return of([]);
})
);
}
}PostListComponent, değişkenli sorgular ve hata yönetimini gösteren daha gelişmiş bir örnektir. limit değişkeni ile döndürülecek post sayısı kontrol edilir. pipe içinde map ve catchError kullanımı, veri akışını güvenli ve reaktif hale getirir. async pipe otomatik olarak abonelikleri yönetir ve UI’yi günceller.
watchQuery’nin cache kullanımı tekrar eden sorguları önler ve performansı artırır. Bu yaklaşım, Angular’ın best practice’lerini yansıtarak, veri akışının yönetildiği ve yeniden kullanılabilir bileşenlerin oluşturulduğu gerçek dünya uygulamalarına örnek teşkil eder.
Angular’da GraphQL entegrasyonu için best practice’ler; küçük ve yeniden kullanılabilir bileşenler oluşturmak, state’i servisler aracılığıyla yönetmek, async pipe kullanmak ve hataları doğru şekilde ele almaktır. Yaygın hatalar arasında state’in direkt değiştirilmesi, gereksiz sorgular ve hatasız yönetim eksikliği bulunur. watchQuery ile cache kullanımı performans optimizasyonu sağlar. Angular DevTools ile hata ayıklama ve performans analizi yapılabilir. Güvenlik açısından sorgu değişkenlerini doğrulamak ve veri erişim kontrolü sağlamak önemlidir.
📊 Referans Tablosu
| Angular Element/Concept | Description | Usage Example |
|---|---|---|
| Apollo Angular | Angular ile GraphQL entegrasyonu sağlayan kütüphane | this.apollo.watchQuery({ query: GET_USERS }) |
| gql | GraphQL sorgularını tanımlamak için template literal | const GET_USERS = gqlquery { users { id name } }; |
| async pipe | Abonelikleri otomatik yönetir ve UI’yi günceller | *ngFor="let user of users$ |
| watchQuery | Veri değişikliklerini izler ve bileşeni günceller | this.apollo.watchQuery({ query: GET_POSTS }).valueChanges |
| catchError | Veri akışındaki hataları yakalar | pipe(catchError(err => of([]))) |
GraphQL entegrasyonu, Angular SPA’larında verimli veri yönetimi sağlar. Apollo Angular, gql ve reaktif veri akışını öğrenmek, yüksek performanslı ve yeniden kullanılabilir bileşenler oluşturmayı mümkün kılar. Sonraki adımlar olarak NgRx veya Akita ile ileri seviye state yönetimi, ChangeDetection optimizasyonları ve lifecycle hook kullanımı önerilir.
🧠 Bilginizi Test Edin
Bilginizi Test Edin
Bu interaktif sınavla kendini test et ve konuyu ne kadar iyi anladığını gör
📝 Talimatlar
- Her soruyu dikkatle okuyun
- Her soru için en iyi cevabı seçin
- Quiz'i istediğiniz kadar tekrar alabilirsiniz
- İlerlemeniz üstte gösterilecek