Looking for solution for mutate dependency and multiple promises in mutate

[TommySorensen]

Hi all.

I am currently building a reusable basket hook with React Query for the server state.
I have search the discussions and issues for examples of running a GET request before i want to call a POST request with useMutation, but haven't found any good examples of it.

Let's say that i 2 endpoints, one for creating(GET) a basket and one for updating(POST) it. The goal is to wait with creating the basket before i'm actually are putting something in it. So when user clicks "add to basket" i could in the useMutation do a fetch call, await it and then run the POST with the basket id i just created. This will properly work fine for first time running the mutate. But let's say the user can click the "add to basket" button multiple times, that will cause a issue since when clicking second time, the basket is not created and the previous promise i still running. So the question is: Are there anything that can handle cases like this i React Query?

I tried something like this:

let basketId = somethingFromLocalStorage(); // will be undefined if nothing found in storage
        
return useMutation(
    async ({ quantity, itemNo }) => {
        let id = basketId;

        if (!id) {
            const { basketId } = await createBasket();
            id = basketId;
        }

        return addBasketItem(id, itemNo, quantity);
    },
    {
        onMutate: (variables) => {
            // Do some smart optimistic update with itemNo and quantity
        },
        onSuccess: () => {
            // Use queryClient.setQueryData to store data in a reusable basket hook
        },
    }
);

User journey:
Click "add to basket" button twice and expect the basket to contain a basket with quantity of 2 with only 2 requests, one for create and one for updating.

[ryanmk54]

You could have a queue, where if the mutation isLoading, the item gets stored in the queue instead of calling mutate. In the onSuccess, you could check the queue and mutate the variables in the queue if there is are variables waiting to be mutated.

[TommySorensen]

@ryanmk54 Okay, so this didn't really solve it since both onSuccess and onError will fire for every time i use the useBasket hook 🤔

[ryanmk54]

What's the error message and stack trace?

[TommySorensen]

What I mean is that since the useBasket hook is a shared hook I use a lot of places. Then the onSuccess will be called on every hook whenever the fetch is returning success. So maybe I should look into the global subscribe event instead on that query key

[TkDodo]

if you want callbacks (onSuccess / onError / onSettled) that are only called once per query, you are looking for the global cache callbacks. I've also written about them (to some extent) here.

[TommySorensen]

@TkDodo Thx. That is also the solution im looking into right now by using the QueryObserver with subscribe or QueryCache. But i still don't have a good solution for my initial question since it might require a queue of fetch calls that should await the first request to finish.