frail-apricot

Mutate Async not working as expected

Hi all, I posted earlier about how to do a certain task. I decided to use async await with the mutateAsync method on my mutations. I set everything up and it all seemed good, until I started running the code. Essentially, I'm getting undefined, and it seems to be running out of sync. Its laid out one after the other. Here is a code snippet:

try {
const token = await getToken()
                
const cl_res = await mutateJWT.mutate({data object redacted})
                
const email_res = await mutateEmail.mutateAsync({email: emailVar})
                
const order_res = await mutateOrder.mutateAsync({Data redacted})

try {
const token = await getToken()
                
const cl_res = await mutateJWT.mutate({data object redacted})
                
const email_res = await mutateEmail.mutateAsync({email: emailVar})
                
const order_res = await mutateOrder.mutateAsync({Data redacted})

Expected behavior: each thing happens one after the other using mutations. Current behavior: First thing happens which isnt a react query thing, just a small function. Then it passes its data to the second thing, which is a mutation. Before the second one finishes, for some reason the third await line gets hit and since it isnt finished it crashed the site as certain variables are undefined. Help! Thanks in advance!

7 Replies

stormy-gold•3y ago

Your second line, first mutate is using mutate not mutateasync. Was that just copy pasta? If so, can you add some logging inside the first mutate, onMutate and then onSuccess/onError/onSettled to see why it's finishing before you expect? Or do you see that it hasn't finished, they're all using mutate async, and the second mutate is still being triggered?

frail-apricotOP•3y ago

yeah that was just me experimenting i actually was just working on this and was just about to post an update because i made a new discovery its not actually running out of order, all of the data is just undefined im assuming that i have to set the data of the constant somehow in the mutation onSuccess callback but I don't actually know how to do that. I was just about to peruse the docs to find that info. do you know how to set the data of the promise using mutateAsync?

stormy-gold•3y ago

Whatever you return from your mutationFn should be available as the data in context in the other callbacks, and once the promise resolves So e.g. like a query, it could be on

const result = await thing.mutateAsync(....)
console.log(result.data) // there's the returned data

const result = await thing.mutateAsync(....)
console.log(result.data) // there's the returned data

And if using it in optimistic updates, onSuccess(data) and onSettled(data)

frail-apricotOP•3y ago

see thats what i thought but its returning undefined cl_res and email_res are both undefined upon console logging them, even after the promise resolves

harsh-harlequin•3y ago

result is the returned data from mutateAsync, not result.data, no? Ie const data = await mutateAsync(…)

afraid-scarlet•3y ago

How is your mutation function implemented? If you get undefined, it's likely because that one returns undefined

frail-apricotOP•3y ago

Hey all, hey @TkDodo 🔮, I actually reached out to my good friend Chat GPT about it and it had me change the actual implementation of the mutation function to be a little more verbose with promises

    const mutatePrintJob = useMutation((data) => {
        return new Promise((resolve, reject) => {
            try {
                const result = sendPrintJob(data);
                resolve(result);
            } catch (error) {
                reject(error);
            }
        });
    }, {
        retry: 10,
        onSuccess: (data) => {
            // handle success here
        },
        onError: (error) => {
            // handle error here
        },
    });

    const mutatePrintJob = useMutation((data) => {
        return new Promise((resolve, reject) => {
            try {
                const result = sendPrintJob(data);
                resolve(result);
            } catch (error) {
                reject(error);
            }
        });
    }, {
        retry: 10,
        onSuccess: (data) => {
            // handle success here
        },
        onError: (error) => {
            // handle error here
        },
    });

I don't know how much of this is actually necessary but this works and the issue is now resolved. I'm new to async await as well as mutateAsync so I was struggling but it made sense when my mutate function was returning a warning "Promise returned from [func] is ignored" Thanks! 🙂

Gaming

Programming

Mutate Async not working as expected

Did you find this page helpful?