Is there any good way to make react-hook-form work with async validation + zod superRefine?

[alex-collibra]

I have a pretty valid usecase, in my opinion: we need to send a value to backend, then backend does some validation and returns an error code back.

I tried a lot of different things, without luck so far. As validation relies on BE response, I believe superRefine is the only way to do it.
However, I faced a lot of issues.

1. without debouncing it makes request on each keystroke
2. there is a need to compare prev value to new value - otherwise it will run refinement on the field, even when unrelated fields change and cause a ton of networks requests
3. even with debouncing it still doesn't work well. In some cases, the error just doesn't appear, even though in resolver it is added to errors object (Probably smth to do with rerendiring timing)
4. With debouncing, if you change the field, then change unrelated field, sometimes, error is not shown at all while isValid flag is false.

The closest behaviour I could get to so far is using this example #40 (comment)

However, it is still causing an issue with #4 when isValidating becomes enabled, when it shouldn't.
Has anyone every had any luck with making it work? It seems like a lot of pain for smth relatively common 😔

[Phibee]

Hi @alex-collibra,

Here's my way of doing it.
https://codesandbox.io/p/sandbox/async-sky-57gfzk

Hope this would help!.

Things to Note:

1. Instead of superRefine, I just used refine.
2. Instead of usual zodResolver(schema), I passed additional arguments.
   Reference: https://github.com/orgs/react-hook-form/discussions/10545 by @leapful
   ex. zodResolver(authFormSchema, { async: true }, { mode: "async" })
3. I used RHF's Controller. reason is easy to adjust and put additional logic to it such as adding debounce.