[Docs]: Using Fetchers Example

[iyhub]

Describe what's incorrect/missing in the documentation

https://reactrouter.com/how-to/fetchers#3-add-type-inference

Where is the export of Search defined?

import { useFetcher } from "react-router";
import type { Search } from "./search-users";

export function UserSearchCombobox() {
  let fetcher = useFetcher<typeof Search.action>();
  // ...
}

[utamori]

It worked like this　 (react-router 7.5.1)

// home.tsx
import type { Route } from "./+types/home";
import { useFetcher } from "react-router";
import type * as Search from "./search-users";

export function UserSearchCombobox() {
  const fetcher = useFetcher<typeof Search.loader>();

  return (
    <div>
      <fetcher.Form method="get" action="/search-users">
        <input
          type="text"
          name="q"
          onChange={(event) => {
            fetcher.submit(event.currentTarget.form);
          }}
        />
      </fetcher.Form>
      {fetcher.data && (
        <ul
          style={{
            opacity: fetcher.state === "idle" ? 1 : 0.25,
          }}
        >
          {fetcher.data.map((user) => <li key={user.id}>{user.name}</li>)}
        </ul>
      )}
    </div>
  );
}
export default function Home({ loaderData }: Route.ComponentProps) {
  return <UserSearchCombobox />;
}

// search-users.ts
import type { Route } from "./+types/search-users";

// { path: '/search-users', filename: './search-users.tsx' }
const users = [
	{ id: 1, name: "Ryan" },
	{ id: 2, name: "Michael" },
	// ...
];

export async function loader({ request }: Route.LoaderArgs) {
	await new Promise((res) => setTimeout(res, 300));
	const url = new URL(request.url);
	const query = url.searchParams.get("q") ?? "";
	return users.filter((user) =>
		user.name.toLowerCase().includes(query.toLowerCase()),
	);
}

// route.ts
import { type RouteConfig, index, route } from "@react-router/dev/routes";

export default [
	index("routes/home.tsx"),

	route("search-users", "routes/search-users.ts"),
] satisfies RouteConfig;