Computed Signal Results Not Re-computing?

[DakotaP22]

I am currently trying to create some computed signals from the result signal for a query. When the component loads, the computed calls to seem to run and return a value. However, when I perform a mutation, invalidate the query and refetches, the computeds do not update.

  appDataQueryResult = this.appDataQuerySvc.testQuery().result;

  data = computed(() => {
    console.log('Re-computing');
    return this.appDataQueryResult().data;
  });
  title = computed(() => this.data()?.title);
  description = computed(() => this.data()?.description);
  archived = computed(() => this.data()?.archived);

I have a feeling the computed might be memoizing the result and not recognizing changes in values as new signals. I cannot think of any other reason that computeds would not be executing after mutation and the data changes. I would at least expect a log stating "Re-computing" whenever the query result signal emits. I tried digging in the code for a bit but I was unable to make much headway even finding a cause.

If this cannot be fixed due to Angular decisions around signal equality functions, I wonder if there is anyway to build selectors/slices into the queries? Here is a link for a stackblitz project where this problem is reproduced: https://stackblitz.com/edit/stackblitz-starters-7hrm4y?file=src%2Fapp%2Fapp.component.ts

As with any other issue, I am hoping I am just doing something terribly wrong and can learn from it.

[DakotaP22]

Also, I am unsure if this should have been opened as an issue instead. I am still new to the whole OSS environment. If this needs converted to an issue instead please let me know and I will do so :)

[luii]

Taken from the RFC

The algorithm chosen to implement the computed functionality makes strong guarantees about the timing and correctness of computations:

• Computations are lazy: the computation function is not invoked, unless someone is interested in (reads) its value.
• Computations are disposed of automatically: as soon as the computed signal reference is out of scope it is automatically eligible for garbage collection. No explicit cleanup boundaries and / or operations are exposed by the library.
• Computations are glitch-free: it is guaranteed that a given computation is executed a minimal number of times in response to dependencies change. The computation never executes with stale / intermediate dependency values and is immune to the famous “diamond dependency problem”. The glitch-free execution doesn’t require any explicit “transaction” or “batching” operations.

The problem you're experiencing is that computed signals are lazy by default. A value needs to be read first to invoke them.
You could force a read if you add a effect where you directly invoke the signal

[luii]

So are you saying my template does not count as a consumer of the computed values?

It should count as a consumer no matter whatsoever.

Also if this is the case why do I see initial values but then get no updates when the query refetches?

The initial result is because the result has yet to be memoized by the lazy computed-signal, for so

I also tried to add your suggestion into my code and it did not fix the issue. I updated the linked project and will relink it here: https://stackblitz.com/edit/stackblitz-starters-7hrm4y?file=src%2Fapp%2Fapp.component.ts,src%2Fapp%2Fapp.component.html
Did I misunderstand your suggestion?

No you didnt misunderstood it, but i missed something. You had also to add the {equal: () => false} function to the data computed signal. This confirms the findings of the following comment, that the computed signal memoizes the reference and not the contents of the returned result.

[luii]

Was this a suggestion for me for implementing the fix in a PR? I would be more than happy to try and do a PR if thats what you are looking for but want to confirm before I commit to it :)

I still want to confirm something before implementing a fix for it though 😆

[DakotaP22]

Hmmm interesting! I did try to add this { equal: () => false } to my data computed signal.

  data = computed(
    () => {
      console.log('Re-computing');
      return this.appDataQueryResult().data;
    },
    { equal: () => false }
  );

and it still doesn't appear to be updating the template. Here is the updated project again: https://stackblitz.com/edit/stackblitz-starters-7hrm4y?file=src%2Fapp%2Fapp.component.ts

[luii]

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h2>Raw: {{state().toggle}}</h2>
    <h2>Computed: {{ computed() }}</h2>

    <button (click)="update()">update</button>
    <button (click)="sameRefUpdate()">broken update</button>
  `,
})
export class App {
  stateObj = { toggle: false };
  state$$ = new BehaviorSubject(this.stateObj);
  state = toSignal(this.state$$, { requireSync: true });
  computed = computed(
    () => {
      console.log('reevaluating');
      return this.state().toggle;
    }
  );

  update() {
    this.stateObj.toggle = !this.stateObj.toggle;
    this.state$$.next({ ...this.stateObj });
  }
  sameRefUpdate() {
    this.stateObj.toggle = !this.stateObj.toggle;
    this.state$$.next(this.stateObj);
  }
}

To illustrate the Problem and to confirm that it is indeed the same object reference that the computed signal is using for memoization
Demo: https://stackblitz.com/edit/stackblitz-starters-vkwvv1?file=src%2Fmain.ts

[luii]

@DakotaP22 if you want you can create a PR for it

[DakotaP22]

Sure! Let me see what I can do :)

[NetanelBasal]

You are mutating the data. You need to do:

  archive(): Observable<null> {
    this.data = {
      ...this.data,
      archived: true
    }
    return of(null);
  }

[DakotaP22]

I was stumped for so long on this and am now a bit ashamed seeing this answer... thank you so much for your help!