httpResource e consumo de dados
httpResource é a forma mais recente do Angular buscar dados de uma API: você passa uma função que retorna a URL, e ele cuida de disparar a requisição, guardar o resultado num signal e refazer a busca sozinho toda vez que algo que a URL depende mudar.
No MovieRow, a URL depende da aba ativa (Populares, Em cartaz...). Como activeTab() é um computed (aula anterior), trocar de aba muda a URL automaticamente — e o httpResource refaz a busca sozinho, sem nenhum código extra pra "escutar" a troca de aba.
O linkedSignal logo abaixo resolve um problema comum: enquanto uma nova busca carrega, ele mantém os itens antigos na tela em vez de mostrar uma lista vazia — só troca quando o novo resultado chega.
protected readonly resource = httpResource<TmdbListResponse>(() => {
const tab = this.activeTab();
return this.lists.listUrl(tab.mediaType, tab.source);
});
protected readonly processedItems = linkedSignal<TmdbListResponse | undefined, MovieCardItem[]>({
source: () => this.resource.value(),
computation: (value, previous) => {
if (value) {
return this.lists.toCardItems(value, this.activeTab().mediaType);
}
return previous?.value ?? [];
},
});O que o httpResource devolve
| Propriedade | Pra que serve |
|---|---|
.value() | O dado já convertido, quando a busca termina com sucesso |
.isLoading() | true enquanto a requisição está em andamento |
.error() | Preenchido se a requisição falhar |
Skeleton de carregamento
.isLoading() que o FlickPicks consegue mostrar aqueles blocos cinza pulsando no lugar dos cards enquanto os filmes ainda não chegaram — sem isso, a tela ficaria vazia por um instante a cada troca de aba.