TanStack Angular Query を使用した Angular v での API 呼び出しの合理化

この記事では、Angular v18 プロジェクトで安定した @tanstack/query-angular パッケージを使用して効率的な API 呼び出しを行うためのガイダンスを提供します?

Angular プロジェクトでの API インタラクションの管理には、反復的なロジックが含まれることが多く、コードの重複、メンテナンスの負担の増大、潜在的な状態管理の複雑さにつながります。 @tanstack/angular-query-experimental は堅牢なソリューションを提供しますが、このパッケージはまだ実験開発中であることに注意することが重要です。代わりに、特に Angular v17 プロジェクトの場合は、安定版 @tanstack/angular-query-experimental パッケージの利用を検討してください。

TanStack Angular クエリの主な利点:

宣言的アプローチ: API リクエストと関連するデータ処理をカプセル化するクエリ関数を定義し、クリーンで読みやすいコードを促進します。

自動キャッシュと再フェッチ: 「再検証中に失効する」などの組み込みのキャッシュ戦略を活用して、パフォーマンスを最適化し、不必要なサーバー呼び出しを削減します。データの整合性を強化するために、ニーズ (データの古さ、ウィンドウの再フォーカスなど) に基づいてデータの再取得を実装します。

リアクティブなデータ処理: オブザーバブルとシグナルを使用してデータにアクセスして管理し、手動のライフサイクル フックや複雑な状態管理パターンを使用せずに UI コンポーネントでのリアクティブな更新を可能にします。

モジュラー設計: API ロジックを再利用可能なクエリ エンティティに編成し、コードの編成と保守性を促進します。

専用開発ツール: TanStack Query Devtools を通じてクエリ実行、キャッシュ状態、パターンの再フェッチに関する洞察を取得し、デバッグと最適化を容易にします。

インストール:

npm または Yarn を使用して必要なパッケージをインストールします。

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

段階的な実装:

@tanstack/angular-query-experimental は Angular v17 で利用できますが、現在実験開発中であり、運用環境での使用は推奨されていません。 Angular v17 プロジェクトで安定した信頼性の高い API 呼び出し管理を行うには、安定した @tanstack/query-angular パッケージの使用を検討してください。

段階的な実装ガイドは次のとおりです:

1. app.config.ts にプロバイダーを追加します。

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

• provideHttpClient、QueryClient、provideAngularQuery をインポートしています。
• 依存関係注入を通じてルーティング、HTTP、および Angular Query 機能を提供することにより、アプリ構成オブジェクトを定義およびエクスポートします。

2. API 応答の Typescript ベースのタイプを定義します。

型は TypeScript でデータの構造と型を指定するために使用され、コードの編成とエラーの防止に役立ちます。 Angular アプリケーション内では、このタイプは API または他のデータ ソースから取得したデータを構造化するための青写真として機能する可能性があります。

npm install @tanstack/query-angular-experimental @tanstack/angular-query-devtools-experimental 

3. API 呼び出しを使用するサービス repos.service.ts を定義します。

import { ApplicationConfig } from '@angular/core';
import { provideRouter } from '@angular/router';

import { routes } from './app.routes';
import { provideHttpClient } from '@angular/common/http';
import { QueryClient, provideAngularQuery } from '@tanstack/angular-query-experimental';

const queryClient = new QueryClient();

export const appConfig: ApplicationConfig = {
  providers: [
    provideRouter(routes),
    provideHttpClient(),
    provideAngularQuery(queryClient)
  ]
};

このサービスは、GitHub API に HTTP リクエストを送信してリポジトリ データを取得する役割を果たします。 HttpClient を使用してリクエストを作成し、応答データが Response タイプで定義された構造に準拠することを期待します。

4. コンポーネント github-repo-list.component.ts で Angular クエリを開始します。

コンポーネントは Angular Query を使用してデータのフェッチとキャッシュを管理します。 ReposService を挿入して API 呼び出しを行います。これは、queryFn を使用してリポジトリ データをフェッチするための一意のキー「repoData」を持つクエリを定義します。

export type Response = {
  name: string
  description: string
  subscribers_count: number
  stargazers_count: number
  forks_count: number
}

5. コンポーネント UI github-repo-list.component.html でデータをレンダリングしましょう。

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Response } from '../../types/responce.type';

@Injectable({
  providedIn: 'root'
})
export class ReposService {

  endpoint: string = 'https://api.github.com';

  constructor(
    private http: HttpClient
  ) { }

  getRepos() {
    return this.http.get<Response>(`${this.endpoint}/repos/tanstack/query`);
  }
}

• このテンプレートは、クエリの状態 (読み込み、エラー、成功) に基づいて、条件付きでさまざまなコンテンツをレンダリングします。
• さまざまなシナリオを効果的に処理し、ユーザーに適切なフィードバックを提供します。
• デバッグと検査のための Angular Query 開発ツールが組み込まれています。

動作デモ:

Github で完全なソース コードを確認してください。ありがとう?

以上がTanStack Angular Query を使用した Angular v での API 呼び出しの合理化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。