stormy-gold

How to access data of parent loader?

My index route loader fetches some data. But I cannot use it inside child route. indexRoute.useLoader() throws the following error error:

const routeTree = rootRoute.addChildren([
  indexRoute.addChildren([
    resourcesRoute,
    resourceDetailsRoute,
    resourceCreateRoute,
    resourceUpdateRoute,
  ]),
  loginRoute,
]);

const routeTree = rootRoute.addChildren([
  indexRoute.addChildren([
    resourcesRoute,
    resourceDetailsRoute,
    resourceCreateRoute,
    resourceUpdateRoute,
  ]),
  loginRoute,
]);

Invariant failed: useMatch("/") is being called in a component that is meant to render the '/resources/$resourceId' route. Did you mean to 'useMatch("/", { strict: false })' or 'useRoute("/")' instead?

Invariant failed: useMatch("/") is being called in a component that is meant to render the '/resources/$resourceId' route. Did you mean to 'useMatch("/", { strict: false })' or 'useRoute("/")' instead?

How can I access parent route loader result?

16 Replies

metropolitan-bronze•3y ago

From my experiments: a) When using data inside a component being rendered by current route, you can retrieve it with myRoute.getLoader(). Preferably myRoute.getLoader(myRoute.useRouteContext().loaderOptions). b) When using data inside a component being rendered by a subroute, you cannot access the data directly from the loader itself with myRoute().getLoader(). You just get an error. However, you can access the data using useLoaderInstance({key: 'myLoaderKey'}).

blank-aquamarine•3y ago

You can use the useLoaderInstance if you are also using a Loader constructor If you just want to reference a parent loader, I believe you can import the useLoader hook from "tanstack/react-router" and then use it like this

const data = useLoader({ from: "/parentPath" })

const data = useLoader({ from: "/parentPath" })

foreign-sapphire•2y ago

This doesn't work for me, same error

absent-sapphire•2y ago

please provide a minimal complete example, e.g. by forking on of the existing examples on stackblitz

xenial-black•2y ago

I get the same Invariant Failed error. Here is a fork with the replicated error: https://stackblitz.com/edit/tanstack-router-1gyeu8?file=src%2Froutes%2Fposts.index.tsx Navigate to the Posts tab in the preview.

Joakim Strandell

StackBlitz

Router Basic React Query File Based Example (forked) - StackBlitz

Run official live example code for Router Basic React Query File Based, created by Tanstack on StackBlitz

national-gold•2y ago

not an expert but the error goes away for me if I add a trailing slash:

const data = useLoaderData({ from: '/posts/' });

const data = useLoaderData({ from: '/posts/' });

after all, your route is defined as:

export const Route = createFileRoute('/posts/')

export const Route = createFileRoute('/posts/')

but yeah there seems to be a /posts/ and a /posts route 🤔 also, since you are using query - why not get access with useQuery ?

absent-sapphire•2y ago

@TkDodo 🔮 is absolutely right, if you are inside of /posts/, then use this as from however, the loader seems to be in /posts so that's the parent you could use the useParentMatches hook to access data from the parent

national-gold•2y ago

so posts.tsx creates /posts but posts.index.tsx creates /posts/ ?

absent-sapphire•2y ago

yes if you don't have any children routes of /posts, you don't need the index route but if you have, and you want to render something at /posts/without any further path segments, you need the index route

national-gold•2y ago

and posts.tsx is always rendered, like route.tsx inside a posts directory? k, sorry for the confusion, I've only worked with nested directories until now

absent-sapphire•2y ago

posts.tsx is at the same level as posts directory. the same thing is route.tsx insides of posts directory

├── posts
│   └── index.tsx
└── posts.tsx

├── posts
│   └── index.tsx
└── posts.tsx

└── posts
    ├── index.tsx
    └── route.tsx

└── posts
    ├── index.tsx
    └── route.tsx

xenial-black•2y ago

I prefer using the data from the loader as it is not possibly undefined.

absent-sapphire•2y ago

how about useSuspenseQuery?

xenial-black•2y ago

I must have missed that hook. Will try that out. Thanks. But regarding the Invariant Failed error. Is useLoaderData not the way to load parent loader data?

absent-sapphire•2y ago

no it is not

absent-sapphire•2y ago

FYI , we released https://github.com/TanStack/router/releases/tag/v1.22.3 now you can access the parent loader data

GitHub

Release v1.22.3 · TanStack/router

Version 1.22.3 - 3/22/2024, 10:55 PM Changes Fix do not use CatchBoundary if neither route nor router default error component is configured (#1355) (c5c325d) by Manuel Schiller loosen strict check...

Gaming

Programming

How to access data of parent loader?

Did you find this page helpful?