En Angular, gestionar manualmente el caching de datos puede ser tedioso y propenso a errores.

El truco

Antes (mal)

import { HttpClient } from '@angular/common/http';
import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-my-component',
  template: '<div>{{ data }}</div>',
})
export class MyComponent implements OnInit {
  data: any;

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.http.get('/api/data').subscribe(response => {
      this.data = response;
    });
  }
}

Después (bien)

import { Component } from '@angular/core';
import { useQuery } from '@tanstack/angular-query';

@Component({
  selector: 'app-my-component',
  template: '<div>{{ data$ | async }}</div>',
})
export class MyComponent {
  data$ = useQuery(['apiData'], () => fetch('/api/data').then(res => res.json())).data;
}

Integra useQuery de TanStack Query directamente en tu componente Angular para manejar el fetching y caching de datos automáticamente. Este enfoque no solo simplifica tu código, sino que también mejora el rendimiento al evitar múltiples llamadas innecesarias a la API, reutilizando datos previamente cargados.

Con TanStack Query, tu aplicación Angular se beneficia de un caching inteligente, optimizando el rendimiento sin esfuerzo adicional.