TanStackT
TanStack•9mo ago•
1 reply
then-purple

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,
});


this is child route
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 '';
}


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?
Was this page helpful?