Remix ドキュメント 日本語版

English

useFetcher

ナビゲーション以外でサーバーとやり取りするためのフックです。

import { useFetcher } from "@remix-run/react";
 
export function SomeComponent() {
  const fetcher = useFetcher();
  // ...
}

オプション

key

デフォルトでは、useFetcher はそのコンポーネントにスコープされた一意のフェッチャーを生成します（ただし、インフライト中は useFetchers() で参照できます）。アプリの他の場所からアクセスできるように、独自のキーでフェッチャーを識別したい場合は、key オプションを使用できます。

function AddToBagButton() {
  const fetcher = useFetcher({ key: "add-to-bag" });
  return <fetcher.Form method="post">...</fetcher.Form>;
}
 
// 次に、ヘッダーで...
function CartCount({ count }) {
  const fetcher = useFetcher({ key: "add-to-bag" });
  const inFlightCount = Number(
    fetcher.formData?.get("quantity") || 0
  );
  const optimisticCount = count + inFlightCount;
  return (
    <>
      <BagIcon />
      <span>{optimisticCount}</span>
    </>
  );
}

コンポーネント

fetcher.Form

ナビゲーションを引き起こさない点を除いて、<Form> と同じです。

function SomeComponent() {
  const fetcher = useFetcher();
  return (
    <fetcher.Form method="post" action="/some/route">
      <input type="text" />
    </fetcher.Form>
  );
}

メソッド

fetcher.submit(formData, options)

フォームデータをルートに送信します。複数のネストされたルートが URL に一致する可能性がありますが、リーフルートのみが呼び出されます。

formData は複数の型を取ることができます。

  • FormData - FormData インスタンス。
  • HTMLFormElement - <form> DOM 要素。
  • Object - デフォルトで FormData インスタンスに変換されるキー/値ペアのオブジェクト。より複雑なオブジェクトを渡し、encType: "application/json" を指定して JSON としてシリアライズできます。詳細については、useSubmit を参照してください。

メソッドが GET の場合、ルートの loader が呼び出され、formData は URLSearchParams として URL にシリアライズされます。DELETE、PATCH、POST、または PUT の場合、ルートの action が formData をボディとして呼び出されます。

// FormData インスタンスを送信 (GET リクエスト)
const formData = new FormData();
fetcher.submit(formData);
 
// HTML フォーム要素を送信
fetcher.submit(event.currentTarget.form, {
  method: "POST",
});
 
// キー/値 JSON を FormData インスタンスとして送信
fetcher.submit(
  { serialized: "values" },
  { method: "POST" }
);
 
// 生の JSON を送信
fetcher.submit(
  {
    deeply: {
      nested: {
        json: "values",
      },
    },
  },
  {
    method: "POST",
    encType: "application/json",
  }
);

fetcher.submit は、フェッチャーインスタンスに対する useSubmit 呼び出しのラッパーであるため、useSubmit と同じオプションも受け入れます。

fetcher.load(href, options)

ルートローダーからデータをロードします。複数のネストされたルートが URL に一致する可能性がありますが、リーフルートのみが呼び出されます。

注意点として、インデックスルートのローダーで load を呼び出す際、index.tsx レイアウトと root.tsx ルートを区別するために、?index クエリパラメータ を含める必要があります。

fetcher.load("/some/route");
fetcher.load("/some/route?foo=bar");

fetcher.load は、アクションの送信後、および useRevalidator を介した明示的な再検証リクエスト後にデフォルトで再検証します。fetcher.load は特定の URL をロードするため、ルートパラメーターまたは URL 検索パラメーターの変更では再検証されません。shouldRevalidate を使用して、リロードする必要があるデータを最適化できます。

options.flushSync

flushSync オプションは、この fetcher.load の初期状態の更新を、デフォルトの React.startTransition 呼び出しの代わりに ReactDOM.flushSync 呼び出しでラップするように React Router DOM に指示します。これにより、更新が DOM にフラッシュされた直後に同期 DOM アクションを実行できます。

ReactDOM.flushSync は React を最適化解除し、アプリのパフォーマンスを低下させる可能性があります。

プロパティ

fetcher.state

fetcher.state でフェッチャーの状態を知ることができます。次のいずれかになります。

  • idle - 何もフェッチされていません。
  • submitting - フォームが送信されました。メソッドが GET の場合、ルートの loader が呼び出されます。DELETE、PATCH、POST、または PUT の場合、ルートの action が呼び出されます。
  • loading - action の送信後、ルートのローダーがリロードされています。

fetcher.data

action または loader から返されたレスポンスデータがここに格納されます。データが設定されると、リロードや再送信（すでにデータを読み取った後に fetcher.load() を再度呼び出すなど）でも、フェッチャーにデータが保持されます。

fetcher.formData

サーバーに送信された FormData インスタンスがここに格納されます。これは、楽観的な UI に役立ちます。

fetcher.formAction

送信の URL。

fetcher.formMethod

送信のフォームメソッド。

追加リソース

ディスカッション

動画