入力中にサーバーへ問い合わせる

useAsyncCheckに、値を受け取って文言を返す関数を渡します。問題が無ければundefinedを返します。返ってきたpropsは、inputと並べて入力欄に展開します。

'use server';

export async function checkHandle(handle: string) {
  return (await handleExists(handle))
    ? 'This username is already taken'
    : undefined;
}

const handle = form.field('handle');
const taken = useAsyncCheck(checkHandle);

<input {...handle.input} {...taken.props} />
{handle.error !== undefined && <p>{handle.error}</p>}
<button disabled={taken.isChecking} type="submit">
  Sign up
</button>

問い合わせる関数には、Server Actionをそのまま使えます。

サーバーの返事は、setCustomValidityで入力欄に付けます。そのため組み込みの検証と同じように扱われ、文言はfield()のerrorに届きます。表示のために別の仕組みを用意する必要はありません。

返事を待っている間はisCheckingがtrueになります。送信ボタンを押せないようにしておけば、答えが出る前に送られることはありません。

問い合わせるのは、入力欄から離れたときだけです。キーを押すたびにサーバーへ問い合わせることはありません。

ほかにも、無駄な問い合わせや古い返事を避けるための決まりがあります。

• 前回の返事と同じ値のまま入力欄を離れても、問い合わせ直しません。
• 返事が前後して届いても、最後に問い合わせた値の返事だけを使います。
• 入力欄を空にして離れると、前の返事は消えます。
• 問い合わせ自体が失敗したときは、何も表示しません。送信されたあとに、サーバーが改めて検証します。