Add a callback that runs before onSuccess to unmount query observers on a deleted item before query invalidation

[Exifers]

Hello,
I have the following use-case:

• I'm on a detail page of an item, loaded with a react-query wrapper hook useItem(someId)
• I hit a delete button, which triggers this mutation:

export function useDeleteItem() {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (id: string) => axios.delete(`/api/items/${id}`),
    onSuccess: async () => {
      await queryClient.invalidateQueries({ queryKey: ['items'] })
    }
  })
}

• Once the mutation is done we navigate to a location that depends of the delete query response:

<button
  onClick={async () => {
    const data = await mutateAsync(id);
    navigateOutOfThisPage(data);
  }}>
  Delete item
</button>

The problem

When doing so, the query invalidation runs before we navigate away from the detail page of the deleted item. Thus it tries to refetch it and receives a 404.

Because of the retry, it retries multiple times before abandonning and finally doing the navigation. So the delete button remains multiple seconds in loading state before navigating, which is a bad UX.

Non-solutions

• Removing await from invalidateQueries:
  There may be multiple places where this mutation wrapper hook is called, and they may want to benefit from the awaited query invalidation to avoid showing stale data.
• Add a custom callback onBeforeInvalidate at the hook level

export function useDeleteItem({ onBeforeInvalidate } = {}) {
  const queryClient = useQueryClient();
  return useMutation({
    mutationFn: (id: string) => axios.delete(`/api/items/${id}`),
    onSuccess: async (data) => {
      onBeforeInvalidate?.(data)
      await queryClient.invalidateQueries({ queryKey: ['items'] })
    }
  })
}

const { mutateAsync } = useDeleteItem({ onBeforeInvalidate: (data) => {
  navigateOutOfThisPage(data);
} })

return <button
  onClick={async () => {
    await mutateAsync(id);
  }}>
  Delete item
</button>

This is not ideal because the flow is less easy to read: mutation and navigation are in two different places. Also the mutateAsync function is not reusable without navigation in the same component. What'd be more ideal is the solution proposed below.

Proposal

Add a callback onBeforeSuccess at the mutation level:

<button
  onClick={async () => {
    await mutateAsync(id, {
      onBeforeSuccess: (data) => {
        navigateOutOfThisPage(data);
      }
    });
  }}>
  Delete item
</button>

I didn't think of the naming for too long, so the naming and the API probably would need to be challenged (what about errors too?). But generally, this motivates to have more fine grained options at the mutation level to hook into the lifecycle of query then invalidation.