T
TanStack•4mo ago
other-emerald

Data Loading and Local Pagination

I have a route that fetch a dataset. I want to do local pagination. Is it possible to have child routes sharing parent query? this is base route 
export const Route = createFileRoute("/images/")({
    loader: async () => await trpcBase.images.getAll.query(),
    component: ImageDetailView,
    errorComponent: RouteErrorComponent,
});
export const Route = createFileRoute("/images/")({
    loader: async () => await trpcBase.images.getAll.query(),
    component: ImageDetailView,
    errorComponent: RouteErrorComponent,
});
this is child route 
export const Route = createFileRoute("/images/$id")({
    component: ImageDetailView,
    errorComponent: RouteErrorComponent,
});
export const Route = createFileRoute("/images/$id")({
    component: ImageDetailView,
    errorComponent: RouteErrorComponent,
});
this is the view that both share 
import { Route } from "./routes/images";

export function ImageDetailView() {
    const images = Route.useLoaderData();
    console.log(images);
        return '';
}
import { Route } from "./routes/images";

export function ImageDetailView() {
    const images = Route.useLoaderData();
    console.log(images);
        return '';
}
this works for '/images' route but not for 'images/image-id' because the Route does not match. what's the best approach to do that? do I just have to add the same data query to the '/images/$id' route without worrying about the double query? or there is a more efficient way to handle these use cases?
1 Reply
generous-apricot
generous-apricot•4mo ago
You can access router data from an arbitrary route (see here https://tanstack.com/router/latest/docs/framework/react/guide/data-loading#consuming-data-from-loaders), but if you wan tot have more control over caching and easier access to the data, I would suggest to go the react query route to decouple the data loading and caching from the routes.
Data Loading | TanStack Router React Docs
Data loading is a common concern for web applications and is related to routing. When loading a page for your app, it's ideal if all of the page's async requirements are fetched and fulfilled as early...

Did you find this page helpful?