Check for unresolved mutations?

[narthur]

I'd like to prevent the user from closing the app if there are currently unresolved mutations happening in the background. To do this, I'll need to be able to check for any unresolved mutations (not queries) regardless of where the user is in the app. Is there a simple way to do this?

[TkDodo]

Maybe look at the query client, it might contain the information that you need and you can get it via useQueryClient when the window is closed.

[TkDodo]

https://react-query.tanstack.com/reference/MutationCache#mutationcachegetall

[narthur]

Yes, that was what I needed!!

Here's my solution:

import {QueryClient} from "react-query"

export function getUnloadMessage(client: QueryClient) {
    const cache = client.getMutationCache()
    const mutations = cache.getAll()
    const statuses = mutations.map((m) => m.state.status)
    const pendingMutations = statuses.includes('loading');

    if (pendingMutations) {
        return "There are changes that may be lost if you continue exiting."
    }
}

And then in the component I use the react-beforeunload package to load the unload event handler with the returned message.

[TkDodo]

Nice!
Quick side question: as soon as the server has received the mutation, the server will apply it - the browser cannot stop this even if you shutdown your computer. Unless retries are involved or so..?

[narthur]

Not gonna lie, I'm not 100% sure how this all works at a low level, but in testing I've definitely managed to submit an operation and then close the tab quickly enough that the operation didn't succeed. I guess that would have to mean I closed the window after I pressed the submit button but before the request was made to the server? 🤔

[TkDodo]

Yes, I guess so too. But it sounds like a real edge case :)

[philwolstenholme]

Here's what I used recently:

const queryClient = useQueryClient();
const hasPendingBasketMutations =
  queryClient.getMutationCache().findAll({
    mutationKey: ["basket"],
    status: "pending",
  }).length > 0;