onSuccess not triggered when useQuery is disposed

[talberko]

Hi,
I have a modal, which uses a specific query for an item.
Behind the modal, I have a list of items.

The scenario:
Inside the modal, I am updating the item, and closing the modal.
In the query onSuccess callback, I want to emit an event, that will trigger a refetch for the items list query.

The issue:
When the modal is closed, seems like the onSuccess observer is removed, and it is not triggered after the queryFn is done.

The expected behavior:
After the queryFn is done and returns the data, I expect onSuccess / onError callbacks to be triggered, even if the query is not in use anymore.

[TkDodo]

I think we discussed this on discord. For posterity, the outcome was:

• use the callbacks on the mutation rather than on the query
• make sure to use the callbacks on useMutation rather than the ones no .mutate

related:

• https://react-query.tanstack.com/guides/mutations#mutation-side-effects
• https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire

[An-Huynh-Certivity]

Even when declaring the onSuccess callback in useMutation, it still does not get executed for some reason.

Here is my mutation custom hook.

// UPDATE
const useUpdateDocumentContent = (docIdentifier: string) => {
  const queryClient = useQueryClient()
  const auth0 = useAuth0()

  return useMutation(
    async (updatedCompositionObjects: ICompositionObject[]) => {
      const auth0Token = await auth0.getAccessTokenSilently()

      const requestConfig: AxiosRequestConfig<ICompositionObject[]> = {
        headers: {
          Accept: 'application/json',
          'Content-Type': 'application/json',
          Authorization: 'Bearer ' + auth0Token,
        },
      }

      return apiClient.put(
        `/${docIdentifier.replaceAll('/', '-')}/content`,
        updatedCompositionObjects,
        requestConfig
      )
    },
    {
      onSuccess: () => {
        console.log(
          queryClient.getQueryCache().find(['document', docIdentifier])
        )
        queryClient.invalidateQueries(['document', docIdentifier])
        console.log('SUCCESS!')
      },
      onSettled: () => {
        console.log('SETTLED!')
      },
      onMutate: () => {
        console.log('MUTATED!')
      },
    }
  )
}

Now when I call useUpdateDocumentContent(documentVersionKey).mutate(updatedCompositionObjects), the console only logs MUTATED!

Note that the backend operation goes through and I receive a valid response header from the REST call.

[TkDodo]

can you show that in a codesandbox reproduction?

[jaswant25]

I am facing the same issue as well

[TkDodo]

please show a codesandbox reproduction and make sure to use the right callbacks, see:

• https://react-query.tanstack.com/guides/mutations#mutation-side-effects
• https://tkdodo.eu/blog/mastering-mutations-in-react-query#some-callbacks-might-not-fire