withMutation Typing

[pablomaurer]

// store
withMutations((store) => ({
  myMutation: httpMutation((myNum: number) => ({
    url: `/api/register/myMutation/${myNum}`,
    method: 'GET',
    headers: apiHeaders(),
  })),
})),

wrong usage (example 1)

// component
readonly myMutation = this.store.myMutation; // Mutation<number, any>

// html
{{ myMutation.isPending() }}

// runtime error:
ERROR TypeError: ctx.myMutation.isPending is not a function

correct usage (example 2)

// component
readonly myMutationIsPending = this.store.myMutationIsPending;

// html
{{ myMutationIsPending() }}

• I would love that example 1 would work.
• The Typings give you the feeling that example 1 should work, but then you end in a runtime error.

[michael-small]

Forgot to mention, this is on my radar. Been looking into this because I would think it would work as well.

I can access the value in the library's own codes' runtime, but at the consumer level, like your code, it has this problem.

[OlegSuncrown]

Maybe this one is also related, so:

if I have mutation inside withMethods

  withMethods(({ _supabaseStore }) => ({
    login: rxMutation({
      operation: (params: { email: string; password: string }) => login(_supabaseStore, params),
    }),
  })),

Then in my component I can do this and all is working

 readonly loginResult = this.loginStore.login.value;
 readonly user = computed(() => this.loginResult()?.user);

The type of login result is

(property) Login.loginResult: Signal<{
    user: User;
    session: Session;
    weakPassword?: WeakPassword;
} | undefined>

But, when I have rxMutation in withMutations, types are same, but there is an error ERROR TypeError: this.loginResult is not a function

  withMutations(({ _supabaseStore }) => ({
    login: rxMutation({
      operation: (params: { email: string; password: string }) => login(_supabaseStore, params),
    }),
  })),

  /* 
    (property) Login.loginResult: Signal<{
      user: User;
      session: Session;
      weakPassword?: WeakPassword;
    } | undefined>
  */
  readonly loginResult = this.loginStore.login.value;
  readonly user = computed(() => this.loginResult()?.user);

[OlegSuncrown]

Maybe it should have something like loginValue

[rainerhahnekamp]

Sorry to jump in late on this issue, but this behavior is actually an intentional design decision rather than a bug. It directly aligns with how withEntities and withResource handle state slice generation.

In NgRx SignalStore, the philosophy is to flatten and spread methods, state, and tracking signals directly to the root of the store. Because of this architectural choice, mutation functions do not wrap nested properties like isPending or error. Instead, withMutations dynamically registers these as distinct signals on the store instance, utilizing the mutation's key as a camelCase prefix (e.g., [mutationName]IsPending, [mutationName]Status, and [mutationName]Error).

---

We should double-check the documentation if there might not be a misunderstanding...

[michael-small]

We should double-check the documentation if there might not be a misunderstanding...

That's on me, example: https://ngrx-toolkit.angulararchitects.io/docs/mutations#signal-values. When writing up the documentation, I just saw that accessing like this worked from a syntax access point of view, so I threw that in. The point about spreading the various types of data was not front of mind for me at the time.