Help writing a withResource signal store feature

[skyleguy]

with angular 19 releasing the rxResource recently it seemed like a cool idea to get a withResource feature working to easily add resources to your signal stores. Ideally it would work something like this:

@Injectable({
  providedIn: 'root'
})
class MyService {
  getData(id: number): Observable<string> {
    return of(`FakeResponseString for id: ${id}`);
  }
}

const MyStore = signalStore(
  withState<{ requestId: number | undefined }>({
    requestId: undefined // the optional signal to be tied to the `request` rxResource option 
  }),
  withResource<string, number, 'myData'>('myData', (store, myService = inject(MyService)) => ({ // `myData` here just determines what to call the newly generated field that contains the resource by just appending `Resource` to it
    request: store.requestId,
    loader: ({ request }) => myService.getData(request)
  }))
)

what this would do is create a ResourceRef<string> by using rxResource<string, number> that is called myDataResource in the store such that i can access it like this from a consumer of MyStore:

private readonly myStore = inject(MyStore);

...

this.myStore.myDataResource().value()
this.myStore.myDataResource().reload()

This would make it incredibly easy to set up rxResources the same way across signal stores while also providing the flexibility to use signalStore-specific state/services to supply the loader and request arguments.

My issue with implementing this is having access to the current store state AND injecting services in the same callback function while also getting the typing correct of the signalStoreFeature method.

I have been attempting to do something like this but cant quite figure it out (the below definitely is not happy):

type ResourceCreateInput<
ResourceResponseType,
ResourceRequestType,
RequestSource = Signal<ResourceRequestType> | undefined,
ResponseSource = (args: ResourceRequestType) => Observable<ResourceResponseType>
> = {
  resourceResponse: ResponseSource;
  resourceRequest?: RequestSource;
}

export function withResource<ResourceRequestType, ResourceResponseType, ResourceName extends string = string>(
  resourceName: ResourceName,
  resourceCreateInputFactory: (
    store: SignalStoreFeatureResult
  ) => ResourceCreateInput<ResourceResponseType, ResourceRequestType>
): SignalStoreFeatureResult {
  return (store) => {
    const resourceCreateInput = resourceCreateInputFactory(store);
    return signalStoreFeature(
      withState({
        `${typeof resourceName}Resource`: rxResource<ResourceResponseType, ResourceRequestType>({ // havent been able to figure out how to dynamically create the field name without requiring the exact string type needed to name it 
          loader: ({ request }) => resourceCreateInput.resourceResponse(request),
         ...(resourceCreateInput.resourceRequest ? { request: resourceCreateInput.resourceRequest() } : {})
        })
      }
    )
  }
}

If i could just get the type of the store in the callback function and the return type of the withResource method i think i would be fine. But also this function returns a callback which also seemed like my MyStore signalStore expected me to call? which seemed bizarre.

Any help on this would be greatly appreciated! It is obviously very easy to work around this and just add my own resources to a later withState value but this would reduce a lot of boiler plate code!

[rainerhahnekamp]

Hi @skyleguy 👋,

We’re aware of the need for linkedSignal and resource (and friends), but we’ve decided to hold off on implementation until resource becomes more clearly defined. Keep in mind that it’s still experimental, and the official RFC isn’t finalized yet.

That said, I’m quite optimistic that we’ll see a solid integration in v20. Until then, you can either rely on self-written extensions or simply use withProps as a workaround.

[skyleguy]

all makes sense to me thanks for getting back! I have not actually used withProps yet but will definitely give it a try for this. thanks for the suggestion