Skip to content
qt

Basics

Route loaders with tag invalidation

Declare tags on route staticData. When the server invalidates matching tags, the loader re-runs automatically — no router.invalidate() needed.

What to watch for

  • ▶Add a todo — the loader snapshot updates (total count, latest todo)
  • ▶This is a LOADER, not a query — route-level data refreshing via SSE
  • ▶Tags are declared on the route, not in the component
View Source

Loader snapshot

Tag: todos.summary via staticData

Total todos
13
oRPC writes
2
Server Fn writes
11

Latest: FFFF

Trigger invalidation

The server function invalidates appTags.todos() which includes todos.summary.

Without query-tags
// Without query-tags: loaders never refresh
export const Route = createFileRoute('/todos')({
  loader: () => fetchSummary(),
  component: TodoSummary,
})

// After a mutation, the loader data is stale.
// You need router.invalidate() or full page reload.
// No way to target specific loaders.
With query-tags
// With query-tags: loaders refresh via tags
export const Route = createFileRoute('/todos')({
  staticData: { tags: [appTags.todos.summary()] },
  loader: () => fetchSummary(),
  component: TodoSummary,
})

// Server invalidates appTags.todos() →
// this loader re-runs automatically.
// No router.invalidate(). No page reload.