Rationalisation des appels d'API dans Angular vwith TanStack Angular Query

Cet article fournit des conseils sur l'utilisation du package stable @tanstack/query-angular dans les projets Angular v18 pour des appels d'API efficaces ?

La gestion des interactions API dans les projets Angular implique souvent une logique répétitive, entraînant une duplication de code, une charge de maintenance accrue et des complexités potentielles de gestion d'état. Bien que @tanstack/angular-query-experimental offre une solution robuste, il est important de noter que ce package est encore en développement expérimental. Au lieu de cela, pour les projets Angular v17 en particulier, envisagez d'utiliser le package stable @tanstack/angular-query-experimental.

Principaux avantages de la requête angulaire TanStack :

Approche déclarative : définissez des fonctions de requête qui encapsulent les requêtes API et le traitement des données associé, favorisant ainsi un code propre et lisible.

Mise en cache et récupération automatiques : Tirez parti des stratégies de mise en cache intégrées telles que « stale-while-revalidate » pour optimiser les performances et réduire les appels inutiles au serveur. Mettez en œuvre la récupération des données en fonction de vos besoins (par exemple, obsolescence des données ou recentrage de la fenêtre) pour une meilleure cohérence des données.

Gestion réactive des données : Accédez aux données et gérez-les à l'aide d'observables et de signaux, permettant des mises à jour réactives dans les composants de l'interface utilisateur sans accrocs manuels du cycle de vie ni modèles de gestion d'état complexes.

Conception modulaire : Organisez la logique de l'API en entités de requête réutilisables, favorisant l'organisation et la maintenabilité du code.

Outils de développement dédiés : Obtenez des informations sur l'exécution des requêtes, l'état du cache et les modèles de récupération grâce aux outils de développement de requête TanStack, facilitant le débogage et l'optimisation.

Installation:

Installez les packages nécessaires en utilisant npm ou Yarn :

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

Mise en œuvre étape par étape :

Bien que @tanstack/angular-query-experimental soit disponible pour Angular v17, il est actuellement en cours de développement expérimental et n'est pas recommandé pour une utilisation en production. Pour une gestion stable et fiable des appels API dans les projets Angular v17, pensez à utiliser le package stable @tanstack/query-angular.

Voici un guide de mise en œuvre étape par étape :

1. Ajoutez des fournisseurs dans 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)
  ]
};

• Importation de provideHttpClient, QueryClient, provideAngularQuery.
• Définir et exporter l'objet de configuration de l'application en fournissant des fonctionnalités de routage, HTTP et Angular Query via l'injection de dépendances.

2. Définissez un type basé sur Typescript pour la réponse API :

Les types sont utilisés dans TypeScript pour spécifier la structure et le type de données, facilitant ainsi l'organisation du code et la prévention des erreurs. Au sein de votre application Angular, ce type sert probablement de modèle pour structurer les données récupérées à partir d'une API ou d'une autre source de données.

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

3. Définissez un service repos.service.ts pour consommer l'appel API :

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)
  ]
};

Le service est chargé d'envoyer des requêtes HTTP à l'API GitHub pour récupérer les données du référentiel. Il utilise HttpClient pour effectuer les requêtes et s'attend à ce que les données de réponse soient conformes à la structure définie dans le type Response.

4. Lancez une requête angulaire dans le composant github-repo-list.component.ts :

Le composant utilise Angular Query pour gérer la récupération et la mise en cache des données. Il injecte le ReposService pour effectuer des appels API. Il définit une requête avec la clé unique 'repoData' pour récupérer les données du référentiel à l'aide de queryFn.

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

5. Rendus les données dans l'interface utilisateur du composant 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`);
  }
}

• Ce modèle restitue de manière conditionnelle un contenu différent en fonction de l'état de la requête : chargement, erreur ou réussite.
• Il gère efficacement différents scénarios, fournissant des commentaires appropriés à l'utilisateur.
• Il intègre les outils de développement Angular Query pour le débogage et l'inspection.

Démo de travail :

Consultez le code source complet sur Github. Merci ?

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!