Docs: Add error handling section to submission handling docs#1566
Docs: Add error handling section to submission handling docs#1566LeCarbonator wants to merge 7 commits intoTanStack:mainfrom
Conversation
| if (response.isError) { | ||
| // Username is taken, return an error for the username field | ||
| return 'Username is already taken!' | ||
| } |
There was a problem hiding this comment.
This says
return an error for the username field
but the error seems to go to the Form not to the Field
There was a problem hiding this comment.
Good catch! The comment is kind of redundant now. I'll remove it!
| onSubmit: async ({ value }) => { | ||
| // If an error happens, they are accessible through | ||
| // `createAccountMutation.error` | ||
| await createAccountMutation.mutateAsync(value) |
There was a problem hiding this comment.
Promoting "mutateAsync" here feels off:
you should almost always use
mutate
– https://tkdodo.eu/blog/mastering-mutations-in-react-query#mutate-or-mutateasync
| await createAccountMutation.mutateAsync(value) | |
| createAccountMutation.mutate(value, { | |
| onSuccess: () => { | |
| // handle success by navigate to another route e.g. | |
| } | |
| }) |
There was a problem hiding this comment.
Here's the thought process behind it:
- Is
mutatesynchronous? If not,onSubmitwould finish immediately andisSubmittingwould flashtruefor a moment - Error handling informs TSF about
isSubmitSuccessful, which would cause a disconnect ifmutateerrors
There was a problem hiding this comment.
Then this seems like one of those exceptions to not prefere mutate over mutateAsync ;-)
It's perfect as it is, thanks for clarifying!
There was a problem hiding this comment.
Do you reckon this should be mentioned somewhere? I assume there's lots of users combining Tanstack Form with TansStack Query
There was a problem hiding this comment.
There's some explenation here: https://tanstack.com/form/latest/docs/reference/type-aliases/baseformstate#issubmitting
I think it would be good to mention it on the "Submission Handling"-Page as well as it clears up a lot of questions.
Signed-off-by: Pascal Küsgen <pascalkuesgen@gmail.com>
docs: expand submission handling in angular
| <form.Field | ||
| name="age" | ||
| validators={{ | ||
| onChange: ({ value }) => | ||
| value < 13 ? 'You must be 13 to make an account' : undefined, | ||
| }} | ||
| children={{() => <>{/* ... */}</>}} | ||
| /> |
There was a problem hiding this comment.
IIRC @crutchcorn wanted to favor Form-Level-Validation over Field-Level-Validation, switching to Form-Level here would keep this guide on Form-Level throughout (reduced complexity).
Another Idea I want to pitch where this would help is: The "Error handling" should end with a "Putting it all together" chapter that shows a full useForm example with onChange, onSubmitAsync validators and the onSubmit.
Ayush pointed out that it wasn't clear enough yet.
I think he's asking why createAccount is called once in form.validators.onSubmitAsync and then again in form.onsubmit (ony that it's now using TSQ and is called createAccountMutation.mutateAsync)
There was a problem hiding this comment.
Good idea! Then it could represent three use cases that don't conflict name-wise!
|
This has sparked some discussion internally. Since it's not clear how big the changes to the diffs will be, I'll mark it as draft for now. |
2 participants
This PR adds some code snippets to get users started on the three common types of errors:
The user errors are implemented using form / field validators (with links to the validation guide page). The Server error example is implemented using TanStack Query.