Suspense for mutation

[DamodarSojka]

Is there a way to trigger suspense mode for useMutation hook?

[dburles]

Just ran into this myself. It seems as though useMutation does not suspend. Though, I did see @tannerlinsley mention that it should over here: #344 (comment). Can anyone shed any light on this?

[dburles]

Still curious if anyone can answer this!

[yashino91]

Hello! I am using react-query 3.19.1. In our new application we'd like to handle any loading state with React.Suspense and this is working fine with useQuery. But it seems that useMutation still does not suspend. Is there any information on how to achive it or is it not intended to work that way?

[TkDodo]

looking at the code, there is support for useErrorBoundary, but not for suspense

[hedaukartik]

Why not suspense for useMutation?

[TkDodo]

because no on has implemented it I guess 😅

[SennaSanzo]

With the release of React 19, is using the use() function together with your_mutation.mutateAsync(...) a valid way to trigger Suspense?

[TkDodo]

no because you would usually trigger that in an event handler and calling use in an event handler does nothing.

[SennaSanzo]

Is it too hacky to store the mutateAsync Promise in state and call use() on it during a re-render? 😂
Joke aside, real question. I'm pretty new in the React community. It works but doesn't feel right so...

[lizzyTheLizard]

FYI: I solved the problem on my side using the following to generate a "suspense aware mutation". It most likely will not work for all cases, but it seems to works for mine...

function useSuspenseMutation<TData = unknown, TError = DefaultError, TVariables = void, TOnMutateResult = unknown>(options: UseMutationOptions<TData, TError, TVariables, TOnMutateResult>, queryClient?: QueryClient): UseMutationResult<TData, TError, TVariables, TOnMutateResult> {
  // This is a hack as tanstack/react-query does not provide a useSuspenseMutation hook. It will not work perfectly in all cases.
  const [endSuspenseFunction, setEndSuspenseFunction] = useState<(() => void) | undefined>(undefined)

  const onSettled: typeof options.onSettled = (d, e, v, o, c) => {
    endSuspenseFunction?.()
    return options.onSettled?.(d, e, v, o, c)
  }

  const mutation = useMutation({ ...options, onSettled }, queryClient)
  if (mutation.isPending) {
    // eslint-disable-next-line @typescript-eslint/only-throw-error
    throw new Promise<void>((resolve) => {
      setEndSuspenseFunction(() => { resolve() })
    })
  }
  return mutation
}