deepComputed returns a signal instead of a deepSignal when used in withComputed

[bstaley]

I have a simple user store like the following

{
  all: {[id:string]: IUser};
  selectedId: string;
}

and my withComputed looks like this

withComputed(({ selected, all }) => ({
  selectedUser: deepComputed(() => all()[selected()])
})

However this is returning a plain signal not a deep signal. Inside the component if I set the deepSignal the same way as I am in the withComputed it works(returning a deepSignal). Any idea what is happening here?

[rainerhahnekamp]

I just tried it out, but on my machineselectedUser is a DeepSignal<IUser>.

interface IUser {
  id: number;
  name: string;
}

interface State {
  all: Record<string, IUser>;
  selectedId: string;
}
const A = signalStore(
  withState<State>({ all: {}, selectedId: '' }),
  withComputed(({ selectedId, all }) => ({
    selectedUser: deepComputed(() => all()[selectedId()]),
  })),
);
const a = new A();
a.selectedUser.name();

[bstaley]

Hi @rainerhahnekamp, Thanks for taking a look!

I guess it comes down to the evaluated value at the time of creation? Even though in my code I'm using withStorageSync it seems like it doesn't matter if the data is injected or not.

In the example below moving the deepComputed before the updateSelectedUser causes the same error you see in the console for userStore.selectedUser.name() vs after updateSelectedUser where selectedUser.name() causes no error and the value is rendered.

https://stackblitz.com/edit/ngrx-signal-store-starter-mrhsrcip

[rainerhahnekamp]

The problem is that you are accessing an entry of a Record which doesn't exist. TypeScript doesn't give you an undefined either and that's why you don't get a compilation error. But during runtime - when deepComputed - hits the undefined you are getting the error.

In your case, I would set a default value for selected or return a default user in deepComputed if it is undefined,.

[bstaley]

Hi Rainer, I've update the stackblitz with

selectedUser: deepComputed(
    () => all()[selected()] || initialState.all['userDefault']
 ),

And all is well now. Thanks for that tip!

[rainerhahnekamp]

You're welcome!