Angular Resource API ve httpResource: Kapsamli Rehber (Angular 22'de Stabil)

Angular'in Resource API ve httpResource ozelligi, yukleme, hata ve cozulmus durumlari otomatik olarak izleyen signal tabanli veri cekme sagliyior. Angular 20'de tanitilan bu API'lar Angular 22'de stabil hale geldi ve uzun HttpClient abonelik kaliplarini reaktif ilkellerle degistirdi.

Uc Resource Varyanti

Angular, asenkron verileri signal olarak yuklemek icin uc yol sunuyor. Her biri farkli bir kullanim senaryosunu hedefliyor, ancak hepsi ayni reaktif modeli paylastiyor: bagimliliklari bildir, bir loader tanimla ve sonucu signal'ler araciligiyla tuket.

• resource() Promise'lerle calisir. fetch() veya herhangi bir promise tabanli API kullanirken idealdir.
• rxResource() Observable'larla calisir. debounceTime, retry veya switchMap gibi RxJS operatorleri gerektiginde dogru secimdir.
• httpResource() Angular'in HttpClient'ini dogrudan sariyor. Interceptor'lar, test araclari ve sema dogrulamasi ekstra konfigurasyonsuz calisiyor.

httpResource ile diger ikisi arasindaki temel fark: httpResource perde arkasinda HttpClient kullaniyor, bu da mevcut interceptor'larin calismaya devam etmesi anlamina geliyor. Orijinal resource() API'si HttpClient'i tamamen atliyordu, bu Angular 19'da bir kisitlamaydi.

resource() ile Kullanici Profili Olusturma

resource() fonksiyonu bir params hesaplamasi ve bir loader fonksiyonu kabul ediyor. params icindeki signal'ler degistiginde, loader otomatik olarak yeniden calistiriliyor.

import { Component, signal, resource } from '@angular/core';

interface User {
  id: number;
  name: string;
  email: string;
}

@Component({
  selector: 'app-user-profile',
  template: \`
    @if (userResource.hasValue()) {
      <h2>{{ userResource.value().name }}</h2>
      <p>{{ userResource.value().email }}</p>
    } @else if (userResource.isLoading()) {
      <p>Loading profile...</p>
    } @else if (userResource.error()) {
      <p>Failed to load user</p>
    }
  \`,
})
export class UserProfileComponent {
  userId = signal(1);

  // params produces the reactive dependency
  // loader receives it and returns a Promise
  userResource = resource<User, number>({
    params: () => this.userId(),
    loader: async ({ params: id, abortSignal }) => {
      const res = await fetch(\`/api/users/${id}\`, { signal: abortSignal });
      return res.json();
    },
  });

  loadUser(id: number) {
    this.userId.set(id); // triggers automatic refetch
  }
}

abortSignal parametresi, userId onceki istek tamamlanmadan degistiginde Angular'in devam eden istekleri iptal etmesine olanak taniyor. Bu, manuel abonelik yonetimi olmadan yaris kosullarini onluyor.

httpResource ile Reaktif Veri Cekme

httpResource, URL bildirimi ve HTTP calistirmayi tek bir cagirida birlestirerek boilerplate'i ortadan kaldiriyor. value, isLoading, error, status ve headers'i signal olarak sunan bir HttpResourceRef donduruyor.

import { Component, signal, computed } from '@angular/core';
import { httpResource } from '@angular/common/http';

interface Product {
  id: number;
  name: string;
  price: number;
  category: string;
}

@Component({
  selector: 'app-product-list',
  template: \`
    @if (products.hasValue()) {
      @for (product of products.value(); track product.id) {
        <div class="product-card">
          <h3>{{ product.name }}</h3>
          <span>{{ product.price | currency }}</span>
        </div>
      }
    } @else if (products.isLoading()) {
      <p>Loading products...</p>
    }
  \`,
})
export class ProductListComponent {
  category = signal('electronics');

  // httpResource re-fetches whenever category() changes
  products = httpResource<Product[]>(() => ({
    url: '/api/products',
    params: { category: this.category() },
  }));

  filterByCategory(cat: string) {
    this.category.set(cat); // pending request is cancelled, new one starts
  }
}

httpResource'a gecirilen fonksiyon bir istek konfigurasyonu nesnesi donduruyor. Angular bu fonksiyon icindeki signal okumalarini takip ediyor, bu nedenle category degistirmek yeni bir GET istegi tetikliyor. Bir istek zaten devam ediyorsa, Angular yenisini baslatmadan once onu iptal ediyor.

chain() ile Kaynaklari Zincirleme

Angular 22, bagimli kaynak yuklemesi icin chain() helper'ini tanitti. Bir kaynak digerinin degerine bagimli oldugunda, chain() yukleme ve hata durumlarini otomatik olarak yayiyor.

import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';

interface User {
  id: number;
  name: string;
  authorId: string;
}

interface Post {
  id: number;
  title: string;
  content: string;
}

@Component({
  selector: 'app-user-posts',
  template: \`
    @if (postsResource.isLoading()) {
      <p>Loading...</p>
    } @else if (postsResource.hasValue()) {
      <h2>Posts by {{ userResource.value().name }}</h2>
      @for (post of postsResource.value(); track post.id) {
        <article>
          <h3>{{ post.title }}</h3>
        </article>
      }
    } @else if (postsResource.error()) {
      <p>Failed to load posts</p>
    }
  \`,
})
export class UserPostsComponent {
  userId = signal(1);

  userResource = httpResource<User>(() => \`/api/users/${this.userId()}\`);

  // chain() propagates userResource's status to postsResource
  postsResource = httpResource<Post[]>({
    params: ({ chain }) => {
      const user = chain(this.userResource);
      return { url: '/api/posts', params: { authorId: user.authorId } };
    },
  });
}

chain(userResource) sadece degeri dondurmekle kalmiyor. userResource yuklenirken, postsResource da yukleniyor olarak rapor ediyor ve loader'i calistirmiyor. userResource hata verirse, postsResource upstream hatayi tasiyan bir ResourceDependencyError ile hata durumuna geciyor.

Bu, ic ice switchMap cagirlarinin RxJS kalibini acik, varsayilan olarak dogru durum yayilimyla degistiriyor.

Zod ile Sema Dogrulamasi ve httpResource

Dis servislerden gelen API yanitlari beklenen sekillerden sapabilir. httpResource uzerindeki parse secenegi, uyumsuzluklari bozuk verileri sessizce yaymak yerine calisma zamaninda yakalamak icin Zod gibi sema dogrulama kutuphanelerini entegre ediyor.

import { Component, signal } from '@angular/core';
import { httpResource } from '@angular/common/http';
import { z } from 'zod';

// Define the expected shape with Zod
const OrderSchema = z.object({
  id: z.number(),
  status: z.enum(['pending', 'shipped', 'delivered', 'cancelled']),
  total: z.number().positive(),
  items: z.array(z.object({
    productId: z.number(),
    quantity: z.number().int().positive(),
    unitPrice: z.number().positive(),
  })),
  createdAt: z.string().datetime(),
});

type Order = z.infer<typeof OrderSchema>;

@Component({
  selector: 'app-order',
  template: \`
    @if (order.hasValue()) {
      <h2>Order #{{ order.value().id }}</h2>
      <p>Status: {{ order.value().status }}</p>
      <p>Total: {{ order.value().total | currency }}</p>
    } @else if (order.error()) {
      <p>Invalid order data received</p>
    }
  \`,
})
export class OrderComponent {
  orderId = signal(42);

  // parse validates the response before exposing it as a signal
  order = httpResource<Order>(
    () => \`/api/orders/${this.orderId()}\`,
    { parse: OrderSchema.parse }
  );
}

API, OrderSchema ile eslesmeyen veri dondurdugunde, kaynak 'error' durumuna geciyor. parse fonksiyonunun donus tipi ayni zamanda value() icin TypeScript tipini de belirliyor, boylece sema tanimlari hem calisma zamani dogrulayicilari hem de tip uretecileri olarak cift gorev goruyor.

stream ve params ile rxResource

Angular, rxResource'ta loader'i stream ve request'i params olarak yeniden adlandiriyor. Bu, rxResource'un destekledigi streaming semantigiyle adlandirmayi hizaliyor. stream fonksiyonu bir Observable baglami aliyor ve bir Observable dondurmeli.

import { Component, signal } from '@angular/core';
import { rxResource } from '@angular/core/rxjs-interop';
import { HttpClient } from '@angular/common/http';
import { inject } from '@angular/core';
import { debounceTime, switchMap } from 'rxjs';

interface SearchResult {
  id: number;
  title: string;
  excerpt: string;
}

@Component({
  selector: 'app-search',
  template: \`
    <input (input)="query.set((.target).value)" placeholder="Search..." />
    @if (results.isLoading()) {
      <p>Searching...</p>
    }
    @if (results.hasValue()) {
      @for (item of results.value(); track item.id) {
        <div>{{ item.title }}</div>
      }
    }
  \`,
})
export class SearchComponent {
  private http = inject(HttpClient);
  query = signal('');

  // params (was "request") provides the reactive input
  // stream (was "loader") returns an Observable
  results = rxResource<SearchResult[], string>({
    params: () => this.query(),
    stream: ({ params: q }) =>
      this.http.get<SearchResult[]>('/api/search', {
        params: { q },
      }),
  });
}

httpResource'un aksine, rxResource Observable pipeline uzerinde tam kontrol sagliyor. debounceTime veya retry gibi operatorler stream icinde zincirleme yapilabilir. Ancak, httpResource en yaygin senaryoyu (tek GET istegi) daha az kodla isliyor.

Durum Izleme: String Literal'ler Enum'larin Yerini Aliyor

ResourceStatus bir string union tipidir. Alti olasi deger, kaynak yasam dongusune ayrintili bir bakis sagliyor:

import { Component, signal, resource } from '@angular/core';

@Component({
  selector: 'app-status-demo',
  template: \`
    <p>Status: {{ data.status() }}</p>
    @switch (data.status()) {
      @case ('loading') { <spinner /> }
      @case ('reloading') { <subtle-spinner /> }
      @case ('resolved') { <data-table [rows]="data.value()" /> }
      @case ('error') { <error-banner [error]="data.error()" /> }
      @case ('idle') { <p>Select a filter to load data</p> }
    }
  \`,
})
export class StatusDemoComponent {
  filter = signal<string | undefined>(undefined);

  data = resource({
    params: () => this.filter(),
    loader: async ({ params: f, abortSignal }) => {
      const res = await fetch(\`/api/data?filter=${f}\`, { signal: abortSignal });
      return res.json();
    },
  });
}

params'tan undefined dondurmek statusu 'idle' olarak ayarliyor ve loader'in calismasini engelliyor. Bu kalip kosullu veri cekme icin iyi calisiyor: kullanici girdi saglayana kadar bir uyari goster, sonra veriyi yukle.

Angular httpResource Mulakat Sorulari

Resource API, Angular mulakat sorularinda standart bir konudur. API ile yuzeysel asinaliktan oteye gercek anlayisi test eden sorular asagidadir.

S: httpResource, resource()'un cozemedigi hangi problemi cozuyor?

resource(), Angular'in HttpClient'ini atlayarak fetch() veya herhangi bir promise tabanli loader kullaniyor. Bu, interceptor'larin (auth tokenlari, loglama, hata isleme icin) uygulanmadigi anlamina geliyor. httpResource dahili olarak HttpClient kullaniyor, boylece interceptor'lar, test araclari (HttpTestingController) ve withFetch() gibi ozellikler ekstra konfigurasyonsuz calisiyor.

S: rxResource httpResource'a ne zaman tercih edilmeli?

rxResource, stream fonksiyonu araciligiyla tam Observable kontrolu sagliyor. Veri pipeline'i RxJS operatorleri gerektirdiginde secin: arama girdisi debounce'lama, ustel geri cekilme ile basarisiz istekleri yeniden deneme veya birden fazla akisi combineLatest ile birlestirme. Basit GET istekleri icin, httpResource daha az kod gerektiriyor.

S: Bir signal hizla degistiginde Angular esanli istekleri nasil isliyor?

Uc kaynak varyantinin tumu params yeni bir deger urettiginde bekleyen istekleri iptal ediyor. httpResource ve resource() icin, AbortSignal temeldeki fetch'i iptal ediyor. rxResource icin, Angular onceki Observable'dan aboneligi kaldiriyor. Bu, eski yanitlarin taze verileri ezmesini onluyor.

S: 'local' statusunun amaci nedir?

Bir kaynak uzerinde .set() veya .update() cagirmak degerini loader'i tetiklemeden yerel olarak degistiriyor. Status 'local''a geciyor, mevcut degerin sunucudan gelmedigi gosteriyor. Bu iyimser UI guncellemelerini destekliyor: UI degisikligi hemen yansitiyor, ayri bir mutasyon istegi calisirken.

S: Zod entegrasyonu httpResource ile nasil calisiyor?

parse secenegi (data: unknown) => T imzasiyla herhangi bir fonksiyonu kabul ediyor. HTTP yaniti geldiginde, httpResource ayristirilan JSON'u value() ayarlamadan once parse'dan geciyor. parse firlatirsa (ornegin, ZodError), kaynak 'error' durumuna geciyor. parse'in donus tipi value() icin TypeScript tipini belirliyor, tek sema tanimindan hem calisma zamani guvenligi hem de derleme zamani tipleri sagliyor.

S: chain() upstream kaynaklardaki hatalari nasil isliyor?

Bir kaynagin params fonksiyonunda chain(upstreamResource) kullanildiginda, upstream kaynak yukleniyor, bosta veya hata durumundaysa bagimli kaynak loader'ini calistirmiyor. Upstream kaynak hata verirse, bagimli kaynak upstream hatayi tasiyan bir ResourceDependencyError ile hata durumuna geciyor. Bu hata dependency (upstream kaynak) ve cause (gercek upstream hata) iceriyor, "benim istegim basarisiz oldu" ile "bagimlilgimin istegi basarisiz oldu" arasinda ayrim yapmayi sagliyor.

Angular signals hakkinda daha derin bir bakis ve daha genis framework ile nasil entegre olduklari icin, signals rehberine bakin.

HttpClient Aboneliklerinden httpResource'a Gecis

Mevcut Angular uygulamalari genellikle ngOnInit icinde HttpClient abonelikleri ile veri cekiyor veya Observable'larla AsyncPipe kullaniyor. httpResource'a gecis onceden tahmin edilebilir bir kalip izliyor:

// BEFORE: manual subscription in ngOnInit
@Component({ /* ... */ })
export class BeforeComponent implements OnInit, OnDestroy {
  private http = inject(HttpClient);
  private destroy$ = new Subject<void>();
  users: User[] = [];
  loading = false;
  error: string | null = null;

  ngOnInit() {
    this.loading = true;
    this.http.get<User[]>('/api/users')
      .pipe(takeUntil(this.destroy$))
      .subscribe({
        next: (data) => { this.users = data; this.loading = false; },
        error: (err) => { this.error = err.message; this.loading = false; },
      });
  }

  ngOnDestroy() {
    this.destroy$.next();
    this.destroy$.complete();
  }
}

// AFTER: httpResource handles lifecycle automatically
@Component({ /* ... */ })
export class AfterComponent {
  users = httpResource<User[]>(() => '/api/users');
  // No ngOnInit, no Subject, no manual unsubscribe
  // Template uses users.value(), users.isLoading(), users.error()
}

Gecis, yasam dongusu yonetimi boilerplate'ini ortadan kaldiriyor. Abonelik temizligi bilesen yok edildiginde otomatik olarak gerceklesiyor. Yukleme ve hata durumlari kaynaga yerlesiyor, ayri boolean flag'lere gerek kalmiyor.

Halihazirda standalone components kullanan uygulamalar icin, gecis basittir: HttpClient enjeksiyonu ve abonelik mantgini tek bir httpResource bildirimiyle degistirin.

Kaynaklar

• Angular Resource API dokumantasyonu - resource(), rxResource() ve httpResource() hakkinda resmi rehber
• Angular 22.0'da yenilikler - Stabil Resource API ve chain() helper'i hakkinda Ninja Squad kapsamasi
• Angular HTTP interceptors rehberi - interceptor'larin httpResource ile nasil calistigi

Angular Resource API Icin Temel Cikariamlar

• httpResource, manuel HttpClient aboneliklerini yukleme, hata ve iptali otomatik olarak isleyen tek bir reaktif bildirimle degistiriyor
• Promise tabanli API'lar icin resource(), RxJS operatorleriyle Observable pipeline'lari icin rxResource() ve interceptor destekli standart HTTP cagrilari icin httpResource() kullanin
• chain() helper'i (Angular 22+) otomatik durum yayilimi ile bagimli kaynak yuklemesini sagliyior; upstream basarisiz olursa, bagimli ResourceDependencyError aliyor
• Status degerleri string literal'lerdir ('idle', 'loading', 'resolved', 'error', 'reloading', 'local')
• httpResource uzerindeki parse secenegi, TypeScript tiplerini de yonlendiren calisma zamani sema dogrulamasi icin Zod veya Valibot'u entegre ediyor
• Hata durumundaki bir kaynakta value() cagirmak firlatiyor; her zaman hasValue() ile koruyun veya once status() kontrol edin
• Tum kaynak varyantlari bagimliliklar degistiginde devam eden istekleri otomatik olarak iptal ediyor, manuel iptal mantigi olmadan yaris kosullarini onluyor