Master the Resource API in Angular 19

In Angular 19, the introduction of the Resource API marks a significant advancement in handling asynchronous data within applications. This experimental feature offers developers a structured and efficient method to integrate async operations, particularly data fetching, into Angular’s reactive signal-based architecture. In this article i have tried to explain what Resource API is and how to use it in Angular 19 applications.

Understanding the Resource API

At its core, a Resource in Angular serves as a bridge between asynchronous data sources and the application’s reactive system. It allows developers to define how data is fetched and how it reacts to changes in related signals. The primary components of a Resource are:

• request: A reactive computation that determines the parameters or conditions for the data fetch. Whenever signals read within this computation change, the Resource recognizes the need to fetch new data.
• loader: An asynchronous function that executes the actual data retrieval based on the current request value.

Creating a Resource

To create a Resource, Angular provides the resource function. Here’s a basic example:

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

const userId: Signal<string> = getUserId();

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

In this snippet, userId is a signal representing the user’s ID. The Resource is configured to fetch user data whenever userId changes. The request function returns an object containing the current userId, and the loader function uses this ID to fetch the corresponding user data.

Managing Resource State

A Resource provides several signals to monitor its state:

• value: Holds the latest data fetched by the Resource.
• status: Indicates the current state of the Resource, which can be one of the following:
  • Idle: No request is in progress.
  • Loading: A request is currently being processed.
  • Resolved: Data has been successfully fetched.
  • Error: An error occurred during data fetching.
  • Reloading: A new request is being processed after a manual reload.
  • Local: The data has been updated locally without initiating a new fetch.

These signals enable developers to react appropriately within the application, such as displaying loading indicators or error messages based on the Resource’s state.

Local Data Updates

One of the notable features of the Resource API is the ability to update data locally without making an immediate server request. This is particularly useful for optimistic UI updates. For example:

userResource.value.update(user => ({
  ...user,
  firstName: 'Updated Name',
}));

After this update, the status of the Resource becomes Local, indicating that the data has been modified locally.

Reactive Data Fetching

The Resource API excels in scenarios where data fetching needs to react to changes in other signals. By defining the request function to depend on specific signals, the Resource automatically triggers data fetching whenever those signals change. For instance:

const todoId = signal(1);

const todoResource = resource({
  request: () => todoId(),
  loader: ({ request }) => fetchTodoById(request),
});

In this setup, whenever todoId changes, the Resource fetches the corresponding todo item automatically.

Aborting Ongoing Requests

The Resource API supports aborting ongoing requests when new ones are initiated. This is particularly beneficial in scenarios where rapid consecutive data fetches might occur, such as user input that triggers searches. By utilizing the abortSignal provided to the loader, developers can ensure that only the most recent request is processed:

const searchQuery = signal('');

const searchResource = resource({
  request: () => searchQuery(),
  loader: ({ request, abortSignal }) =>
    fetch(`/search?q=${request}`, { signal: abortSignal }).then(res => res.json()),
});

Here, if searchQuery changes before the previous fetch completes, the ongoing request is aborted, and a new one is initiated.

Manual Reloading

Developers can manually trigger the loader function using the reload method. This is useful for implementing features like “refresh” buttons:

searchResource.reload();

Calling reload sets the Resource’s status to Reloading and re-executes the loader function.

Integration with Observables

While the Resource API primarily utilizes Promises, it can be adapted to work with Observables. This flexibility allows developers who prefer RxJS to integrate the Resource API seamlessly into their existing codebases.

Conclusion

The Resource API in Angular 19 provides a robust framework for managing asynchronous data within the reactive paradigm of signals. By offering fine-grained control over data fetching, state management, and reactivity, it empowers developers to build more efficient and responsive applications. As this API is currently experimental, it’s essential to stay updated with the latest Angular releases and documentation to leverage its full potential effectively.