useMutation request stacking

[tomas862]

Hello,

First of all want to thank you for this amazing library, it helps a lot to solve many problems in pretty neat way! Anyway, got bumped into one issue which I solved but the solution I did at first glance does not look really good. Or actually it is a new feature which could be integratable in the query library.

Problem:

user clicks add to cart and after each cart addition we need to initialize background synch with the back-end to re-fetch new possible prices for the product. When user first time clicks add to cart and there is no cart, in the back-end we create the cart and return an id, when user clicks add to cart second time, we sent a PATCH request for a given cart id and product to update the cart in the back-end.

The problem I found is that if user does this fast, or has a slower internet connection, when the second useMutation is called it ofcourse does not wait for first one to finish thus creating the cart again which leads to a bug with incorrect cart being synched with the back-end. I solved it by adding some local state to some components - code below ⬇️

the code which initialises add to cart

export const useAddToCart = (): (product: DenormalizedProduct, quantity: number) => void => {
    const dispatch = useDispatch()
    const mutation = useMutation<unknown, unknown, CartSynchronizationProps>(SHARED_RQ_KEYS.synchronizeCart);

    const addToCart = (product: DenormalizedProduct, quantity: number): void => {
        mutation.mutate({ product, quantity })

        dispatch(actionSetCartProductQuantityValueByProduct(product, quantity))
    }

    return useDebouncedCallback(addToCart, 300)
}

here the code displays only the mutation trigerring , it happens in debounced function. Also , I use mutation defaults because I need to persist the request even if user changes the page. The code below now has an actual way how the problem was solved ⬇️

const CartSynchronizationMutationProvider = ({ children, queryClient }: React.PropsWithChildren<{ queryClient: QueryClient }>): JSX.Element => {
    const dispatch = useDispatch()
    const { omega } = useServices()
    const cartId = useSelect(state => getCartHandler(state).getPending().cartId)
    const customerId = useSelect(state => getCurrentCustomerId(state))
    const [ requestStack, setRequestStack ] = useState<CartSynchronizationProps[]>([])

    const { mutate: createCart, isLoading: isCreateCartLoading } = useMutation(
        ({ product, quantity }: CartSynchronizationProps) => omega.postCart(productToAddCartForm(customerId, product, quantity)),
        {
            onSuccess: (response: CreatedResponse) => {
                dispatch(actionAddCartId(response.id))
                queryClient.invalidateQueries({ queryKey: [SHARED_RQ_KEYS.pricing], exact: false })
            }
        }
    )

    queryClient.setMutationDefaults(SHARED_RQ_KEYS.synchronizeCart, {
        mutationFn: (props: CartSynchronizationProps) => {
            const { product, quantity } = props

            if (isCreateCartLoading) {
                setRequestStack([...requestStack, props])
                return Promise.resolve()
            }

            if (!cartId) {
                createCart(props)
                return Promise.resolve()
            }

            return omega.patchCartQuantity(cartId, product.productId, quantity)
        },
        onMutate: () => {
            queryClient.cancelQueries({ queryKey: [SHARED_RQ_KEYS.pricing], exact: false })
        },
        onSuccess: () => {
            queryClient.invalidateQueries({ queryKey: [SHARED_RQ_KEYS.pricing], exact: false })
        },
    })

    const { mutateAsync } = useMutation<unknown, unknown, CartSynchronizationProps>(SHARED_RQ_KEYS.synchronizeCart);

    useEffect(() => {
        if (!isCreateCartLoading && !empty(requestStack) && cartId) {
            Promise.all(requestStack.map(props => mutateAsync(props)))
            setRequestStack([])
        }
    }, [ isCreateCartLoading, requestStack, cartId, mutateAsync ])

    return (
        <>
            {children}
        </>
    )
}

note how requestStack local state is used here, in mutationFn if id does not exist I call other mutation to create the cart, now it sets the state for that mutation loading and while it's happening all other requests are being put to local state requestStack.
Once loading is finished I have a cartId that now I need to attach to the other requests. However now with the below useEffect I need to repeat all the API requests that tried to be sent when the cart was in the creation process.

So this code actually works but I really feel tanstack query library could benefit of this scenario and to have some kind of request stacking functionality implemented under the hood. It could use some kind of an lock mechanism to lock the mutation until the lock is released under certain logic etc...

---

In any ways, if you find the issue and possible ideas interesting , let's discuss, will be willing to help and contribute myself to the library if you see there can be more people benefiting from this use case. Cheers!

[TkDodo]

I think it's interesting and I'm open for suggestions. I wouldn't want to add a complicated api for this, but if we can find a straight forward way it could see it happen.

So basically, what we would is consecutive calls to mutate or mutateAsync be stacked (one after the other) rather than run in parallel, right?
We already do a bit of request stacking if you continue paused mutations. When you were offline and come back online, all mutations that have gathered in the meantime will be fired one by one.

[tomas862]

yes exactly! However there's more to it, or at least in my case - the first request returns an id as a response which is then used in the subsequent requests. (I do believe this can be a case for more people) Anyway, will check how currently paused mutations work so this part could give an inspiration of how to proceed with an idea.