Idiomatic approach to error handling when `onSubmit` handler rejects?

This has very likely been asked before but couldn't find existing conversations about it. The most relevant example (https://tanstack.com/form/latest/docs/framework/react/examples/query-integration) also doesn't cover this.

I'm using

@tanstack/react-query

@tanstack/react-query

so I have something like this for the form setup:

const someMutation = useMutation(...)
const form = useForm({
  ...,
  onSubmit: async () => {
    return someMutation.mutateAsync(...)
  },
})

const someMutation = useMutation(...)
const form = useForm({
  ...,
  onSubmit: async () => {
    return someMutation.mutateAsync(...)
  },
})

What's the recommended approach for reactively triggering some UI (e.g. an error dialog) when the

onSubmit

onSubmit

throws?

My initial inclination was to make use of

someMutation.status

someMutation.status

i.e.

<ErrorDialog open={someMutation.status === 'error'} onClose={() => someMutation.reset()} />

<ErrorDialog open={someMutation.status === 'error'} onClose={() => someMutation.reset()} />

Guessing that this would work fine in this specific case but wondering if there's something in the

form

form

store that I can subscribe to in order to achieve something similar?

TanStack•8mo ago•

3 replies

hidden-sapphire

@tanstack/react-query

@tanstack/react-query