TanStack Routerに移行するのかい しないのかい、どっちなんだい！ / Are you going to migrate to TanStack Router or not? Which one is it?

2024/11/16：
TSKaigi Kansai 2024
https://kansai.tskaigi.org/

TanStack Routerに移行するのかい しないのかい、どっちなんだい！

清水 那音也
ソフトウェアエンジニア

Transcript

1. TanStack Routerに移行するのかい しないのかい、どっちなんだい！ 株式会社カミナシ Shimmy(@naoya7076) TSKaigi Kansai 2024
2. TanStack Routerに 「Type Safe」に移行したい時に 考えること
3. ルーティングで行っていること 1.Path Params http://example.com/blogs/1 2.Search Params http://example.com/blogs?filter=hoge 3.State Value (of the location) URL間での内部状態の受け渡し カミナシ帳票の現在 TanStack Routerに 移行したい！ ルーティング - React Router v6 データフェッチ - TanStack Query
4. データ受け渡しとTanStack RouterのAPI 1.Path Params - useParams const postId = useParams({ from: '/posts/$postId', select: (params) => params.postId, }) 2.Search Params - useSearch const selected = useSearch({ from: '/posts/$postId', select: (search) => search.postView, }) // ^ string
5. 3.State Value (of the location) URL間での内部状態の受け渡しが 型安全ではない ※1 const navigate = useNavigate(); navigate( { to : '/user', state : { user : someUserData } } ); const location = useLocation(); const user = location.state.user; //Type Safeではない ※1https://github.com/TanStack/router/discussions/284
6. declare module '@tanstack/react-router' { interface Register { router: typeof router; } interface HistoryState { post?: { id: string; name: string }; } } const navigate = useNavigate(); navigate({ to: '/posts/$postId', params: { postId } state: {{ post: { id: '123'; name: 'foo' } }} }) 型をつけるには HistoryState を拡張する
7. 課題 1. Globalな型定義が汚染-> ルーティング全体に影響する a. 関係ない箇所でも表示される b. Optionalにせざるを得ないので型定義の恩恵を受けづらい 2. 管理するstateを増やすとHistoryStateが肥大化
8. 1.Search Paramsに寄せる TanStack Routerはin-memory stateで状態を持つのではなく Search Paramsに寄せようという思想がある※2 TanStack RouterのSearch Paramsではオブジェクトなども柔軟に扱える 3.State Value (of the location)の代替案 2.状態管理ライブラリを使う - Jotai - Zustand ※2
9. in-memory stateで内部的に扱いたい場合は...? 3.State受け渡しが型安全になるのを待つ -> 実装されそうな雰囲気ではあるが...※3 ※3
10. 私: TanStack Router V2でルート間の型付 きstate渡しが導入されると嬉しいな※4 Tanner:We could totally do that. 実際に聞いてみた ※4 https://github.com/TanStack/router/discussions/975#discussioncomment-10413562
11. 結論 State受け渡しが型安全になったら TanStack Routerに移行する (=typed state per routeが入ったら) そのためにできること - あらかじめV2に備えたコードにしておく※5 - 欲しい機能であれば+1する※6 - 自分で実装してPull Requestを出す ※5 https://github.com/TanStack/router/discussions/975 ※6 https://github.com/TanStack/router/discussions/284#dis cussioncomment-9344482
12. We are hiring!! 「カミナシ　エンジニア」で検索