Vite + TanStack Router - 7. データローダー
TanStack Routerにはルートに遷移するタイミングでページで表示するデータを取得する loader という機能があります。
今回は loader とその関連機能を紹介します。
loader
loaderはルートで参照するデータの読み込み処理を書く場所です。
自前でfetchを書く場合は戻り値を返し、その値をコンポーネント内で Route.userLoaderData() で参照します。
しかし、実際はTanStack Queryと合わせて使うことが多いと思います。
6の認証付きルートで説明したように、ルートの設定ではフックが使えません。
そのため TanStack Queryを使う場合は、あらかじめqueryClientをContextに入れておく必要があります。
export const Route = createFileRoute('/some')({ loader: ({context: {queryClient}}) => queryClient.ensureQueryData(someQueryOptions), // 指定したキーのデータがない場合はfetchを実行し、ある場合はキャッシュを使う component: () => { const { data } = useSuspenseQuery(someQueryOptions) // show data },);beforeLoad
beforeLoad にはルート遷移前に実行する処理を書きます。
ここで認証状態をチェックしたり、コンテキストへ値を追加したりします。
beforeLoad は loader と同じ引数を受け取り、戻り値がルートの context に追加されます。
export const Route = createFileRoute('/protected')({ beforeLoad: ({ context, location }) => { if (!context.auth.isAuthenticated) { throw redirect({ to: '/login', search: { redirect: location.href, }, }) } return { hoge: true }; }, loader: ({ context }) => context.hoge // true,})loaderDeps
ローダーで必要となるデータを準備する関数です。
loader内では直にサーチパラメータを読み出す事ができないので、あらかじめ loaderDeps
で読み出して、loader に渡す必要があります。
loaderDepsの戻り値はloader内でdeps.hoge としてアクセスできます。
export const Route = createFileRoute('/user/$userId')({ loaderDeps: ({ search }) => ({ userId: search.userId }), loader: async ({ deps }) => { const user = await fetchUser(deps.userId) return { user } }})abortController
ルートがアンマウントされたときに実行中のPromiseをキャンセルするのに使います。通常のPromiseのAbortControllerと同じです。
自前でfetchを書く場合は入れておくとよいでしょう。
export const Route = createFileRoute('/data')({ loader: async ({ AbortController }) => { const response = await fetch('/api/data', { signal: AbortController.signal }) return response.json() }})まとめ
beforeLoadにルート遷移前の処理を書くloaderDepsでサーチパラメータを取得するloaderでコンポーネントに必要なデータを読み込む