Skip to main content

Resource API | Angular

  • Resource API | Angular

alt text

info

Artigo sobre: https://blog.codedimension.com.br/post/resource-api/

A Resource API (Angular 17+) é uma API reativa baseada em Signals para buscar, cachear, invalidar e sincronizar dados HTTP.

Ela resolve problemas clássicos:

  • subscribe espalhado
  • loading/error manuais
  • refetch confuso
  • estado HTTP duplicado

Tudo isso vira estado declarativo.

🔧 O que é resource?​

resource() permite criar recursos reativos assíncronos, como chamadas HTTP, de forma declarativa, reagindo automaticamente a mudanças em sinais dependentes.

🧠 Exemplo básico:​

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

const userId = signal('123');

const userResource = resource({
  request: () => ({ id: userId() }),
  loader: ({ request }) => fetchUser(request.id)
});

const firstName = computed(() => userResource.value()?.firstName);

🛠️ Principais propriedades:​

  • request: função reativa que define o que "ativa" a requisição.
  • loader: função assíncrona que retorna os dados.
  • value(): retorna o resultado carregado.
  • status: estado atual (Idle, Loading, Resolved, Error, etc.)
  • reload(): força nova carga dos dados.

📦 Usos comuns:​

  • Integração com APIs.
  • Dados que mudam com base em outros sinais (ex: filtros, IDs).