Is there an equivalent of QueriesObserver for mutations (i.e. MutationsObserver)?

[Noor0]

I have a use-case where some button clicks on a page can redirect the user to a new page. Before redirection, I want to make sure that all the mutations triggered by components on the page complete before redirecting to the new page.

I think I can achieve it by using useIsMutating and React.useEffect at the moment but I want to be able to write an action effect handler instead of React.useEffect. Something like this:

async function redirect() {
  const observer = new MutationsObserver({
    keys: [...],
    predicate: () => true
  })
  const canRedirect = await new Promise((res, rej) => {
    observer.subscribe((mutations) => {
      const someMutationsFailed = mutations.some(m => m.state.error)
      if (someMutationsFailed) return res(false)
      const mutationsCompleted = mutations.some(m => m.state.success)
      if (mutationsCompleted) return res(true)
    })
  })
  
  //  redirect
}

...

<button onClick={redirect}>redirect</button>

[TkDodo]

useMutationState in v5 can do it I think

[Noor0]

I've achieved what I wanted to do with MutationCache.findAll and MuataionCache.subscribe. My only concern is that is it okay to be using MutationCache.findAll? This method is not documented anywhere and I don't wanna rely on something that might be removed or changed in future releases

[TkDodo]

yes, its a public method.