mutate callbacks can fire after unmount

[janlat]

According to the docs

additional callbacks won't run if your component unmounts before the mutation finishes

however this is only true if the mutation was already in progress during the unmount. If you start the mutation after the unmount, they will run. Is this intentional?

[TkDodo]

can you show a codesandbox example of what you mean?

[TkDodo]

we don't have the "mountedRef" tracking anymore in v4, no.

[janlat]

Actually, it probably would be better to change

query/packages/query-core/src/mutationObserver.ts

Line 133 in e33bda3

this.currentMutation.addObserver(this)

into

if (this.listeners.length) {
  this.currentMutation.addObserver(this)
}

[TkDodo]

Hmm, could you maybe create a PR that has a failing test case with the current implementation, so that we can see if this would fix the issue without introducing other regressions?

[janlat]

#4848

[louis-young]

Hi 👋

Thanks for writing the test. I'm not a maintainer but I've verified the failing test case and tested the proposed fix. It seems to fix the issue without introducing any regressions. The change seems sensible: we won't add an observer for the mutation if there are no listeners (i.e we won't observe mutate callbacks if the component has been unmounted before mutating).

I can see there's a related test case here, although it unmounts the component after the mutation has started, not before:

query/packages/react-query/src/__tests__/useMutation.test.tsx

Line 848 in 431fc09

it('should call cache callbacks when unmounted', async () => {

)

Perhaps it'd be worth updating this test case to be more explicit at the same time, something like this:

- 'should call cache callbacks when unmounted'
+ 'should only call cache callbacks when unmounted after mutating'

It also might be worth updating the new test case to assert that the cache callbacks are still called?

I'll leave this to Dominik but it looks good to me! Thanks again 🚀

[louis-young]

This is/will be resolved by #4848. Thanks everyone 🚀