Review
Cache cold-chain excursion detail loader
Pharma logistics ops bounce between the excursion list and a single sensor report dozens of times per shift. Wire the detail route loader with explicit staleTime and gcTime so revisiting a report reuses cached payload instead of re-fetching the sensor API on every navigation.
TanStack RouterTier 3routercachingloaders
Click a line to flag it, pick one or more labels, then submit. If the change looks correct, approve it.
routes/excursions/$excursionId.tsx+7-3
| 14 | 14 | import { createFileRoute } from "@tanstack/react-router"; | |
| 15 | 15 | import { fetchExcursionReport } from "@/api/cold-chain"; | |
| 16 | 16 | import { ExcursionDetail } from "@/components/excursions/ExcursionDetail"; | |
| 17 | 17 | ||
| 18 | 18 | export const Route = createFileRoute("/excursions/$excursionId")({ | |
| 19 | - | loader: async ({ params }) => { | |
| 20 | - | return fetchExcursionReport(params.excursionId); | |
| 21 | - | }, | |
| 19 | + | // Fresh for 30s while ops page between list and detail; keep unused | |
| 20 | + | // report entries 10m so back-navigation stays instant mid-shift. | |
| 21 | + | staleTime: 30_000, | |
| 22 | + | gcTime: 10 * 60_000, | |
| 23 | + | loader: async ({ params }) => { | |
| 24 | + | return fetchExcursionReport(params.excursionId); | |
| 25 | + | }, | |
| 22 | 26 | component: ExcursionDetailPage, | |
| 23 | 27 | }); | |
| 24 | 28 | ||
| 25 | 29 | function ExcursionDetailPage() { | |
| 26 | 30 | const report = Route.useLoaderData(); | |
| 27 | 31 | return <ExcursionDetail report={report} />; | |
| 28 | 32 | } |