Support for Async Mutations / Component Callbacks

[DakotaP22]

Firstly, I am in love with this library and it is greatly reducing the size of my service layer when syncing with Firebase's Firestore.

With that said, I cannot find any references to async mutators. I have a use case where I want to trigger a mutator then navigate to a different route after onSuccess is called and completes, but I do not want to write this routing directly into the injectMutation call because more than one page uses this mutation but only one page redirects to a new route after the mutation; the rest do not react to the mutation at all.

So my question is: are there currently any ways to achieve this in Angular Query? From the TanStack documentation I would expect either mutateAsync or adding an onSuccess callback would allow me to achieve this but it does not look like this has been implemented yet.

I understand this is still a growing project and I greatly appreciate all the work that has been done to get this where it is now. Just curious how I might be able to solve this problem :)

[NetanelBasal]

You can do this:

  this.addTodo.result$.subscribe((result => {
      if(result.isSuccess) {
        // 
      }
    })

[NetanelBasal]

@luii I now see that you did the following:

    const mutate = (variables: TVariables) => {
      mutationObserver.mutate(variables).catch(() => {
        // noop
      });
    };

Any reason that you did it like this and not returning the promise?

[NetanelBasal]

  public async onAddTodo(title: string) {
    await this.addTodo.mutate({ title, showError: false });
    this.newTodo = '';
  }

[NetanelBasal]

@luii ok I see now. I will add the mutateAsync function

[luii]

Even though you probably already solved this one, i did this because you could then use the mutation as sync function call.
And mutateAsync is used in a async context, like you did in the second code snippet.

For the catch on the end: you would get a unhandled Promise exception in some environments (i believe nodejs does this; dont know about deno though), this prevents this from happening.

[NetanelBasal]

@DakotaP22 you can use the first suggestion or the new mutateAsync function in the latest version.

[DakotaP22]

Wow that was unbelievably fast! I will grab latest and try it out! Thank you so much and happy holidays to those who celebrate :)

[DakotaP22]

My use case with mutateAsync is working beautifully now but I am having an issue with the component callbacks.

Here is a snippet from workbucket-list.component.ts

this.bucketsQuery.archiveBucket().mutate(bucketId, {
    onSuccess: () => {
        console.log('Component Success Triggered!');
    },
    onSettled: () => {
        console.log("Component Settled Triggered!")
    }
});

I am not getting any logs in the console here but the mutation is at least partially working as my workbucket succesfully archives in the database. I am probably doing something wrong here and hoping its a simple issue. Also feel bad you are digging into this on the holiday, so please do not feel the need to look into this today on my behalf (forgive me if you do not celebrate, I don't like to assume anything). Absolutely wonderful work here and I am loving it regardless.

[luii]

You're not going crazy, this is indeed weird that neither mutate nor mutateAsync is calling them.

[luii]

@NetanelBasal do you think that the options param from use is shadowing the params on const mutate?
IMHO this is the only logical reason this is not working, though we should then see a duplicated invalidation of his request in the dev-tools. I tried it with a simple console.log but it doesnt seem to over-shadow it. 🤔

We should, just in case, also rename the params maybe, just to be sure that in the future nothing over-shadows them.

[luii]

@NetanelBasal

query/query/src/lib/mutation.ts

Line 75 in eabe879

options.mutationFn(variables);

I think we're also missing the options here, since @DakotaP22 's example is using observables this will probably the problem.

[NetanelBasal]

Added the callback to the playground and it works fine

[DakotaP22]

I thought the issue was a missing CommonModule import but that didnt make sense to me. Turns out when comapring to your playground I also copied over a line in which you accessed the result of the mutation

public addTodo = this.#todoService.addTodo();
public addTodoSignalResult = this.addTodo.result;

It looks like you are then using the addTodoSignalResult in the template instead of directly accessing the query.

Is it best practice to use the result of the mutation instead of the query itself? If not I will just have to remember to add a reference to the mutation result. Its weird, I didn't even have to use this result, I just needed to add a line accessing '.result' on my mutation.

So glad you have good examples to compare to or I would have probably been doing this wrong forever!

[luii]

Also realizing I didn't fully answer your question... basically I want to listen for the success of this query but ,depending on which component is consuming the query, it should perform different actions. To achieve this now I think I would need to subscribe to the results or listen for changes inside an effect. Or I could probably create separate mutators each with their own onSuccess callbacks. If my understanding of the approach in my other comment is correct, I would be able to define a generic onSuccess on the mutation itself to handle query invalidation, and when I call mutate from different components, I can define a separate onSuccess callback for each of them that will run after the query invalidation was triggered and perform different actions.

But to answer this question @DakotaP22 , yes this would be a good way to utilize the mutation side-effect (onSettled, onSuccess, and so on). 👍

[slawomir-misz]

Hello,
Does anyone tested in on httpClient? Because im having a big problem with this.
Here i edited the app from this post on httpClient with POST method.

https://stackblitz.com/edit/stackblitz-starters-vjtv4b?file=src%2Fapp%2Fapp.component.ts

Am i missing something?

[luii]

Unless you're using the reportProgress option, there should be no problem with using either fetch (Promise based) or HttpClient (Observable based) approach.

Because im having a big problem with this.

And what is the problem you're experiencing right now?

Am i missing something?

The network request is being made in the stackblitz, so what is the problem in there?

[slawomir-misz]

There is no console.log after the query successfuly done.
In function onArchiveClick i am using a callback onSuccess and its not returning the log.

[luii]

You seemingly had an old version installed on your Stackblitz.

The newest version is 2.0.0-beta.11

[unifyiGreenleaf]

If it helps in troubleshooting I have been playing around with the stackblitz and have noticed the following.

• The archive button works as intended logging both the onSuccess callback within the service and the one set in the context of the component
• The post button only displays the log from the onSuccess callback defined at the service level and ignores the component one

at the component level to get the component onSuccess to run I had to add the the following

// in app.component.ts
onPostClick() {
    // if this next line stays commented then it only logs the service callback not the "Mutate Callback component"
    // this.postData.result$.subscribe();
    this.postData.mutate(
      {}, // are empty variables OK ?
      {
        onSuccess: () => {
          console.log('Mutate Callback component');
        },
      }
    );
  }