RFC(`@ngrx/signals`): Resource Integration Part 1 - Introduce Extend Resource APIs

[markostanimirovic]

Which @ngrx/* package(s) are relevant/related to the feature request?

signals

Information

Introduce a set of utilities for extending Angular Resource behavior with composable, reusable extensions.

Motivation

The current behavior of Angular Resource APIs is opinionated and leaves limited room for customization. Two common real-world requirements that are not configurable at the resource level:

• Value on loading — when a resource reloads, value() resets to undefined until the new data arrives. There is no built-in way to preserve the previous value during a reload.
• Value on error — when a resource enters the error state, value() throws. There is no built-in way to return a fallback or the previous value instead.

Angular recently introduced Resource Snapshots, which allow composing resources and can help with the "preserve value on loading" case. However, the error behavior remains unaddressable, and resourceFromSnapshot always returns the base Resource<T> type, meaning any additional APIs from more specific resource types (e.g. WritableResource) are lost in the process.

Overriding the default error behavior is also a prerequisite for introducing Resource integration for SignalStore. With the default behavior, once a resource enters the error state, any subsequent patchState call will throw because it reads value() internally — breaking the store.

Ideally, these behaviors would be configurable directly on the resource. Since they are not supported natively, this set of utilities offers what feels like the most ergonomic way to achieve this today: a thin extension layer that wraps any resource and patches only the behavior you want to change, while fully preserving the original resource type.

Prototype

Examples and source code of resource extensions are available here: https://github.com/markostanimirovic/extend-resource-prototype

Quick Start

import { extendResource, withPreviousValueOnLoading, withValueOnError } from 'extend-resource';

@Component({
  /* ... */
})
export class TodoList {
  readonly todosResource = extendResource({
    resource: httpResource(() => `https://dummyjson.com/todos`),
    extensions: [withPreviousValueOnLoading(), withValueOnError(undefined)],
  });
}

API

extendResource

Applies extensions to a resource and returns it with its original type preserved.

const todosResource = extendResource({
  resource: httpResource(() => `https://dummyjson.com/todos`),
  extensions: [withPreviousValueOnLoading(), withValueOnError(undefined)],
});

provideResourceExtensions

Registers extensions for a given injector scope (application, route, component). Any resource wrapped with extendResource inside that scope will automatically have these extensions applied.

// main.ts
bootstrapApplication(App, {
  providers: [provideResourceExtensions(withValueOnError(undefined))],
});

With global extensions in place, calling extendResource with just a resource is enough:

@Component({
  /* ... */
})
export class TodoList {
  // Global extensions are applied automatically
  readonly todosResource = extendResource(httpResource(() => `/api/todos`));
}

Additional per-resource extensions are appended after the global ones:

@Component({
  /* ... */
})
export class TodoList {
  // Global extensions run first, then withPreviousValueOnLoading
  readonly todosResource = extendResource({
    resource: httpResource(() => `/api/todos`),
    extensions: [withPreviousValueOnLoading()],
  });
}

provideResourceExtensions is scope-aware and composes with parent injector extensions, so you can layer defaults at the app level and add more specific behavior at the route or component level without losing the parent configuration.

Extensions

Extensions are plain functions with the signature (resource: R) => void. They receive the resource and patch its behavior in place. The built-in extensions all follow the same pattern and can be freely combined.

withPreviousValueOnLoading()

Keeps the last resolved value while the resource is reloading, instead of resetting to undefined.

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos?page=${this.page()}`),
  extensions: [withPreviousValueOnLoading()],
});

// value() returns the previous page's data while the next page is loading,
// rather than undefined.

withValueOnLoading(value)

Returns a specific fallback value while the resource is loading.

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos`),
  extensions: [withValueOnLoading([])],
});

// value() returns [] on initial load and on every subsequent reload.

withPreviousValueOnError()

Returns the last successfully resolved value when the resource enters an error state, instead of throwing.

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos`),
  extensions: [withPreviousValueOnError()],
});

// If the request fails, value() returns whatever was successfully loaded before,
// rather than throwing an error.

withValueOnError(value)

Returns a specific fallback value when the resource enters an error state, instead of throwing.

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos`),
  extensions: [withValueOnError([])],
});

// If the request fails, value() returns [] instead of throwing.

I would be willing to submit a PR to fix this issue

• Yes
• No

[manfredsteyer]

Love it!

I'd also like to have a way to activate/ dectivate a resource. Currently, we need an if that returns undefined when we want to deactivate it.

Instead, we could do sth like this:

const active = signal(false);

const todosResource = extendResource({
  active: active,
  resource: httpResource(() => `/api/todos`),
  extensions: [withValueOnError([])],
});

[rainerhahnekamp]

@manfredsteyer, that would be another extension. I would see the API like this

const active = signal(false);

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos`),
  extensions: [withActivationSignal(active)],
});

I would also see a potential for allowing an Observable in params:

const interval$ = interval(1000);

const todosResource = extendResource({
  resource: httpResource(() => `/api/todos`),
  extensions: [withObservableParams(interval$)],
});

[mauriziocescon]

My personal wish list:

1. value kept among params changes,
2. value provided in the loader,
3. possibility of passing an object in the reload function (monitoring / tracking),
4. possibility of defining an initial value.

Basically matching solid createResource capabilities. Not sure how to fit such points in the proposed design!

https://stackblitz.com/edit/solidjs-templates-kdsa4w8f?file=src%2FApp.tsx

function delay(ms: number) {...}

function NumberGenerator() {
  const [source, setSource] = createSignal<number | undefined>(undefined);

  // 1) data() kept among source changes
  const [data, { refetch }] = createResource<string[], number>(
    source,

    // 2) value provided in the loader
    // 3) refetching: param from refetch(param)
    async (source: number, { value, refetching }) => {
      return new Promise(async (resolve, reject) => {
        const r = Math.round(Math.random() * 100) / 100;
        await delay(r * 2000);
        if (r < 0.75) {
          resolve([...(value ?? []), `${r} ${refetching ? refetching : ''}`]);
        } else {
          reject(new Error('random failure'));
        }
      });
    },

    // 4) can define an initial value
    { initialValue: [`0`, `1`] }
  );

  // ...

  return (
    <>
      ...
    </>
  );
}

PS: I got something more or less working some time ago... but I guess not really extensible
https://stackblitz.com/edit/stackblitz-starters-zowmtd3k?file=src%2Fmain.ts

[rainerhahnekamp]

@mauriziocescon, just to be sure what we already have:

value kept among params changes,

Could also be done with ResourceSnapshot (released in Angular 21.2)

value provided in the loader

That should already be the case with the normal resource

possibility of passing an object in the reload function (monitoring / tracking),

Do you have an example?

possibility of defining an initial value.

Isn't that already the defaultValue of the resource itself?

[mauriziocescon]

Let me start with some pseudo code:

  // warning ⚠️: invalid code 😅
  readonly accumulator = resource({

    params: () => ({chunk: this.chunk()}),

    loader: ({params, value, reloadObject }) => {
      if (params.chunk === 1) {
        // fetch based on chunk and returns [...newValue],
      } else {
        // fetch based on chunk and returns [...value, ...newValue]
      }
    },
  });

1. Yeah, I know

2. It's a bit tricky to explain, as it ties back to point 1): value is not provided in the loader function — only previous.status is. That said, I see real potential in exposing it there, assuming value is preserved across reloads (see the pseudo code above).

3. Imagine you want to call resource.reload from multiple places — say, btn1 and btn2 for simplicity. You might want to trigger a saga based on that, so you can track which button initiated the reload when investigating issues. Much like point 2, such "metadata" would be valuable to have available inside the loader function.

4. Not really — just this reference: https://github.com/angular/angular/discussions/60121#discussioncomment-12340676

I'm aware these requests may be difficult to implement in a modular way, or might even imply a broader framework shift. In practice, this would bring Angular's resource API closer to what SolidJS currently offers.

[robmanganelly]

Not the biggest fan of
const [a, setA] = createB
Signals have “setters” but also “updaters” and that behavior could make harder to track ( in the code) where the signal is being used . ( people can just start passing setters as inputs like they do in react)
This is a React pattern and it works for react world
But angular follows a different styles

One way to solve the problem of tracing the source of an event is using the event plugins from Ngrx
If you really care about which button originated the call you can create one different event per each button and handle it with the same reducers/ handlers and attach any side effects you need
Sorry for any typos, writing from mobile

Love all the propped extensions btw ❤️❤️