T
TanStack•2y ago
exotic-emerald

loader for nested route components

If I have a route which has several child components and each component requires some data loading, how can I add loader functions to child components? do I load data the traditional way with useQuery or should I load all data in the route and pass it to each child? or is there a better way? 
 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function
 /route-a:
    <ChildComponent/> // requires data loading
    <ChildComponent2/> // requires data loading

only the route has the loader function
2 Replies
xenial-black
xenial-black•2y ago
If you are already using TanStack Query, then you can just load the data at /route-a, and call useSuspenseQuery on the child routes for it.
xenial-black
xenial-black•2y ago
You make it easier for yourself by abstracting away the options you pass into the hook by using the queryOptions helper. https://tanstack.com/query/latest/docs/framework/react/reference/queryOptions
queryOptions | TanStack Query React Docs
queryOptions({ queryKey,

Did you find this page helpful?