Data and React Query Examples

Purpose and Scope

Data-heavy Router examples need a reliable routing shell before they can demonstrate query clients, deferred values, optimistic mutations, or cache invalidation. The source-backed examples for this page are intentionally minimal generator-cli-only applications, but they are useful because they show the common foundation every richer data example must have: a generated route tree, a router instance, framework-specific rendering, and an index file route. Treat these fixtures as the baseline to clone before layering in TanStack Query, route loaders, pending states, or deferred rendering patterns from the adjacent data-loading guides.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

Relevant Source Files

• docs/router/installation/with-router-cli.md — explains when to use the Router CLI, the generate and watch commands, script wiring, generated route tree handling, and default file-based routing configuration.
• e2e/react-router/generator-cli-only/src/main.tsx — shows the React application entry point, router creation, generated route tree import, default preload and stale-time options, type registration, and RouterProvider mounting.
• e2e/react-router/generator-cli-only/src/routes/index.tsx — shows the React file route module for the root path and the route options object that can be extended for data examples.
• e2e/solid-router/generator-cli-only/src/main.tsx — mirrors the same router setup for Solid, using the Solid Router package and Solid renderer.
• e2e/solid-router/generator-cli-only/src/routes/index.tsx — shows the Solid root file route module and component shape.
• e2e/vue-router/generator-cli-only/src/main.tsx — shows the Vue entry point, shared router configuration, type registration, and RouterProvider usage inside a Vue application.

Core Example Shape

The React, Solid, and Vue fixtures all follow the same application shape. Each imports routeTree from the generated file, passes that tree into createRouter, registers the router type through module augmentation, and renders RouterProvider into the app root. That shared structure matters for data examples because route data, search validation, loader dependencies, and typed navigation all depend on the router knowing the generated route tree. Once the tree is registered, framework components and hooks can resolve route-aware types from the concrete router instance instead of from untyped path strings.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

The most important data-adjacent settings in the fixtures are defaultPreload, defaultStaleTime, and scrollRestoration. The examples configure intent-based preloading, a five-second default stale time, and scroll restoration at router creation. For a future TanStack Query example, this is the place to reason about overlap between route-level preloading and query-level prefetching. The router can decide when a route should begin preparing data, while an external query cache can own normalized server data, request de-duplication, and mutation workflows. Keeping those concerns explicit prevents duplicated fetching behavior in larger route trees.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

File Routes as Data Extension Points

The root route modules are deliberately small: they call createFileRoute for the slash path and provide a component option that renders a welcome screen. This is the route object you would extend when converting the fixture into a data example. The route options object is the natural home for route-scoped behavior because it is colocated with the URL segment and participates in generated typing. In a data-heavy tree, the same pattern scales from a root home page to nested resource pages where each file can declare its own route-specific concerns.

Sources: e2e/react-router/generator-cli-only/src/routes/index.tsx, e2e/solid-router/generator-cli-only/src/routes/index.tsx

The React and Solid route modules also demonstrate how framework syntax stays local while route declaration remains conceptually the same. React imports React and returns className markup, while Solid uses Solid’s JSX attribute conventions. The route construction pattern does not change. That consistency is important when reading examples across frameworks: the interesting difference is usually the rendering adapter, not the routing contract. When a data guide shows a loader, query prefetch, or pending UI pattern in one framework, first identify the route declaration boundary, then translate only the component and provider syntax.

Sources: e2e/react-router/generator-cli-only/src/routes/index.tsx, e2e/solid-router/generator-cli-only/src/routes/index.tsx

CLI Generation Workflow

The Router CLI documentation frames the command-line generator as a file-based routing tool for projects that are not using a supported bundler integration. It installs the route-generation command, then expects package scripts to run a one-time generate step for builds and a watch step during development. That workflow is important for data examples because the generated route tree must stay in sync with route files before type-aware loader code, link options, and route references can be trusted. A stale generated tree can make an otherwise correct data example look broken.

Sources: docs/router/installation/with-router-cli.md

{
  "scripts": {
    "generate-routes": "tsr generate",
    "watch-routes": "tsr watch",
    "build": "npm run generate-routes && ...",
    "dev": "npm run watch-routes && ..."
  }
}

The CLI page also calls out generated-file hygiene. The generated route tree is managed by TanStack Router, so it should not be edited by hand and is a good candidate for formatter, linter, search, and watcher exclusions. For example repositories, this keeps attention on the authored route files rather than generated output. For data-heavy examples, it also reduces noisy diffs when route modules change while demonstrating loaders, cache settings, or deferred UI. Readers should edit files under the routes directory, then let the generator produce the route tree artifact.

Sources: docs/router/installation/with-router-cli.md

Framework Entry Points

React mounts RouterProvider with ReactDOM.createRoot and wraps it in React.StrictMode. Solid renders a function that returns RouterProvider through solid-js/web. Vue creates an app whose setup function returns RouterProvider and mounts it to the app element. These differences show where framework-specific providers belong. If a data example adds a query client provider, suspense boundary, or application shell, place it in the same entry-point layer that already owns RouterProvider. The router instance itself should remain configured once and passed down through that provider boundary.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

The module augmentation blocks are easy to overlook, but they are central to typed examples. Each framework package receives a Register interface whose router property is the exact router instance type. That is how route-aware APIs can infer the generated tree for navigation, params, search, and route data. When adapting these fixtures into TanStack Query examples, keep the registration next to router creation. Moving data clients around is fine, but losing the router registration would weaken the type story that makes the example valuable in the first place.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

Adaptation Checklist

Use the cited fixtures as a small, repeatable starting point for data examples rather than as complete Query demonstrations. First, run route generation so the route tree reflects the files under the routes directory. Next, add the data provider layer around the framework’s RouterProvider in the entry point. Then extend a file route’s options object with the route-scoped data behavior being demonstrated. Finally, verify that the router’s preload and stale-time defaults match the intended story, because those defaults affect how soon route data is prepared and how long it is considered fresh.

Sources: docs/router/installation/with-router-cli.md, e2e/react-router/generator-cli-only/src/main.tsx, e2e/react-router/generator-cli-only/src/routes/index.tsx

A good data example should make ownership boundaries visible. Router should own URL matching, route lifecycle, typed navigation, and the generated route tree. TanStack Query, when added by the reader, should own reusable server-state caching and mutation coordination. Deferred rendering examples should clearly show which part of the route can render immediately and which part waits for data. The provided files do not implement those layers directly, but they supply the minimal Router structure that keeps those later additions understandable, typed, and portable across React, Solid, and Vue.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/vue-router/generator-cli-only/src/main.tsx

Testing Signals and Next Steps

The examples live under end-to-end fixture directories, which signals that the repository uses them to exercise real generated-route applications instead of isolated snippets. For readers building their own data-heavy examples, that is the right standard to copy: keep the app small, wire the router exactly as production code would, and let route files drive the generated tree. After this page, read the data loading, deferred data loading, preloading and caching, and external data loading guides to decide which layer should fetch, cache, defer, or invalidate each piece of application data.

Sources: e2e/react-router/generator-cli-only/src/main.tsx, e2e/react-router/generator-cli-only/src/routes/index.tsx, e2e/solid-router/generator-cli-only/src/main.tsx, e2e/solid-router/generator-cli-only/src/routes/index.tsx, e2e/vue-router/generator-cli-only/src/main.tsx