64. httpResource() — HTTP取得をさらに短く書く

v22の新機能のレッスンで学んだ resource() は、loader に fetch などの取得処理を自分で書く汎用の仕組みでした。しかしAngularでのデータ取得といえば大半がHTTPです。そこで、HTTP取得に特化して resource() をさらに短く書けるようにしたのが httpResource() です。URLを返す関数を渡すだけで、その中で読んだシグナルが変わるたびに自動で再取得してくれます。

httpResource<User>(() => `/api/users/${this.userId()}`) のように書くと、value()・isLoading()・error() といった読み取り方は resource() とまったく同じ形で使えます。大事な違いは、裏で HttpClient が使われることです。つまり、通信と非同期の応用で学んだインターセプター(認証ヘッダーの付与や共通エラー処理)が、httpResource の通信にもそのまま効きます。fetch を直書きする resource() では得られない利点です。

注意点は、httpResource() が読み取り(GET)のための道具だということです。データの作成や更新(POST / PUT / DELETE)は、これまで通り HttpClient で行います。「画面に出すための取得は httpResource、ユーザー操作による変更は HttpClient」という分担を覚えておくと、コードの置き場所に迷いません。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

type User = { id: number; name: string };

@Component({
  selector: 'app-user-card',
  template:
    '@if (user.isLoading()) { <p>読み込み中...</p> }' +
    '@else { <p>{{ user.value()?.name }}</p> }' +
    '<button (click)="userId.set(userId() + 1)">次のユーザー</button>',
})
export class UserCardComponent {
  userId = signal(1);

  // URLの中で読んだシグナルが変わると自動で再取得。
  // 通信は HttpClient 経由なのでインターセプターも効く
  user = httpResource<User>(() => `/api/users/${this.userId()}`);
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗