TanStack Routerを使いながらReactを再考する

routes
├── __root.tsx # 全てのルートにマッチします
├── index.tsx # インデックスルートになります（localhost:3000/）
├── about.tsx # そのままパスになります（localhost:3000/about）
└── todos
    ├── $todoId # パスパラメータになります
    │   └── index.tsx #（localhost:3000/todos/$todoId）
    └── index.tsx # ディレクトリ名がパスになります（localhost:3000/todos）

$ bun create vite react-vite-app
$ bun add @tanstack/router @tanstack/query
$ bun add -D @tanstack/router-devtools @tanstack/react-query-devtools

import { routeTree } from './routeTree.gen' // こんなファイルは存在しない

$ bun add -D @tanstack/router-plugin

import { TanStackRouterVite } from "@tanstack/router-plugin/vite";
import react from "@vitejs/plugin-react";
import { defineConfig } from "vite";
import tsconfigPaths from "vite-tsconfig-paths";

// https://vite.dev/config/
export default defineConfig({
	plugins: [react(), tsconfigPaths(), TanStackRouterVite()],
});

{
  "routesDirectory": "./src/routes",
  "generatedRouteTree": "./src/routeTree.gen.ts",
  "routeFileIgnorePrefix": "-",
  "quoteStyle": "single"
}

$ bun run build

src
├── main.tsx
├── routeTree.gen.ts
├── routes
│   └── index.tsx
└── vite-env.d.ts

import React, { StrictMode, Suspense } from "react";
import { createRoot } from "react-dom/client";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { createRouter, RouterProvider } from "@tanstack/react-router";
import { routeTree } from "@/routeTree.gen.ts";
import { ErrorBoundary } from "react-error-boundary";
import { ErrorFallback } from "@/components/ErrorFallback";

// Step1: TanStack Queryのクライアント作成
const queryClient = new QueryClient({
	defaultOptions: {
		queries: {
			refetchOnWindowFocus: false,
			retry: false,
			staleTime: 1000 * 60 * 5,
			gcTime: 1000 * 60 * 5,
		},
	},
});

// Step2: ルータを作成
const router = createRouter({
	routeTree,
	context: { queryClient },
	defaultPreloadStaleTime: 1000 * 60 * 5,
	defaultPreload: "intent",
});

// Step3: （重要）ルータの型を登録する
declare module "@tanstack/react-router" {
	interface Register {
		router: typeof router;
	}
}

// Step4: モックサーバ（MSW）とTanStack Router/Query DevToolsのインポート
const setUp = async () => {
	if (import.meta.env.DEV) {
		React.lazy(() =>
			import("@tanstack/router-devtools").then((res) => ({
				default: res.TanStackRouterDevtools,
			})),
		);
	}
	if (import.meta.env.MODE !== "mock") return;
	const { worker } = await import("@/services/api/mock/browser");
	return worker.start();
};

// Step5: Reactコンポーネントルートを作成
setUp().then(() => {
	createRoot(document.getElementById("root")!).render(
		<StrictMode>
			<Suspense>
				<ErrorBoundary FallbackComponent={ErrorFallback}>
					<QueryClientProvider client={queryClient}>
						<RouterProvider router={router} context={{ queryClient }} />
					</QueryClientProvider>
				</ErrorBoundary>
			</Suspense>
		</StrictMode>,
	);
});

import Header from "@/components/Header";
import { Outlet, createRootRouteWithContext } from "@tanstack/react-router";
import type { QueryClient } from "@tanstack/react-query";
import { TanStackRouterDevtools } from "@tanstack/router-devtools";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

// React Queryを注入
export const Route = createRootRouteWithContext<{ queryClient: QueryClient }>()({
	component: RootComponent,
});

function RootComponent() {
	return (
		<>
			<Header />
			<Outlet />
			<ReactQueryDevtools buttonPosition="top-right" />
			<TanStackRouterDevtools position="bottom-right" />
		</>
	);
}

routes
├── __root.tsx
├── index.lazy.tsx
├── index.tsx
├── ooops.tsx
└── todos
    ├── $todoId
    │   └── index.tsx
    └── index.tsx

const getTodosOptions = queryOptions({
	queryKey: ["/todos"],
	queryFn: () => getTodos(),
	staleTime: 1000 * 60 * 5,
});

// ルート
export const Route = createFileRoute("/todos/")({
	component: ToDosPage,
	loader: async ({ context: { queryClient } }) => {
		return await queryClient.ensureQueryData(getTodosOptions);
	},
	pendingComponent: () => <Loading />,
	errorComponent: (err) => (
		<ErrorFallback
			error={err.error}
			resetErrorBoundary={() => window.location.assign(window.location.origin)}
		/>
	),
});

// ページコンポーネント
function ToDosPage {
	const { data: todos } = useGetTodosSuspense();
}

<Suspense fallback={<FallbackComponent />}>
    <ErrorBoundary FallbackComponent={<ErrorFallback />}>
        <MyComponent />
    </ErrorBoundary>
</Suspense>

function ToDosPage() {
	const { data, status } = useGetTodos();
    // 状態遷移のハンドリング
	if (status === "pending") return <Loading />;
	if (status === "error") return <ErrorFallback error={data} resetErrorBoundary={() => {}} />;

    return <Component />;
}

// orval.config.ts
export default defineConfig({
	api: {
		input: path.resolve(__dirname, "openapi.yaml"),
		output: {
            ...
            mock: true,
			client: "react-query",
			override: {
				mutator: {},
                // useSuspenceQuery()を生成する
				query: {
					useSuspenseQuery: true,
				},
			},
		},
	},
    validation: {}
});

const getTodosOptions = queryOptions({
	queryKey: ["/todos"],
	queryFn: () => getTodos(), // 自動生成
	staleTime: 1000 * 60 * 5,
});

// ルート
export const Route = createFileRoute("/todos/")({
	component: ToDosPage,
	loader: async () => {},
	pendingComponent: () => {},
	errorComponent: (err) => {}
});

// ページコンポーネント
function ToDosPage {
	const { data: todos } = useGetTodosSuspense(); // 自動生成
}