`useLoaderData` in child component—inherits from Route? | Remix | Page 1

digital ore Dec 2, 2022, 5:25 PM

#

Hiya, relatively new to the framework. I'm wondering if there's any way I can make a subcomponent rely on it's own implementation of loader and useLoaderData—as of now it seems like it will use the data from the route even if you specify a separate loader. If this isn't the way to do it, is there a better convention to do so in Remix?

#

In this case the data I want to show doesn't correspond to a single ID of a resource, it represents a persistent connection with a piece of hardware. So I'm not sure defining a subroute/path component would be the right move.

#

Ah... I may want "Pathless Layout Routes"? I'm exploring that option for a moment

analog pike Dec 2, 2022, 5:31 PM

#

either that or a fullstack component: https://www.epicweb.dev/full-stack-components

digital ore Dec 2, 2022, 5:34 PM

#

Checking that out... is it also reasonable to assume I could simply add another outer Route component that manages that data and then just redirect from /outer/ to /outer/actualroute

#

Alternatively I'm thinking I can just Promise.allfor the endpoints I need in the top level loader. Those "Resource Routes" Kent links to seem interesting too...

#

Ok, I think I see—it seems to me that the key for these Resource Routes would be that they don't export a default component. They can still export a component that you can use?

digital ore Dec 2, 2022, 6:21 PM

#

Hm, the full stack component isn't having the intended effect @analog pike. It makes several calls to what seems to be the right path, when I do fetcher.load but never calls the loader itself from the file.

analog pike Dec 2, 2022, 6:22 PM

#

without more context/code, I can't really help

#

did you place the full stack component in your routes/ directory?

#

if you're doing a fetcher.load on its path, and loader doesn't get called, then it's probably the wrong path, or there's a typo somewhere

digital ore Dec 2, 2022, 6:27 PM

#

Paths seem right. I was wrong, loader is being called on server, but data is empty on client. I'm thinking now it's that a Promise isn't being resolved. Sorry, will update!

#

Thanks for your help

analog pike Dec 2, 2022, 6:29 PM

#

you're missing an await ?

digital ore Dec 2, 2022, 6:29 PM

#

Yeah so I can see the loader get called with the correct data at line 11

#

On the server

#

But on the client I see a bunch of errors from the fetcher and fetcher.data is empty

analog pike Dec 2, 2022, 6:30 PM

#

screenshot of browser console please

digital ore Dec 2, 2022, 6:31 PM

#

Errors are canceled requests:

#

Does it matter that this is an external API? I wouldn't have thought so, but.

#

sorry to cut off data, anonymizing a bit. Seems to me like applying "?index" to the route gives me the correct data, but I still don't see it in fetcher.data

#

ok, hold on, seems okay now when I call it outside of useEffect, which makes sense if fetcher.load is async. I thought tacking on ?index was the solution but perhaps it was just async/await woes 🙂 thanks again

#

My last q would just be if you can get the goodness of ErrorBoundary components in these full stack components too...

#

CatchBoundary seems to handle it, but not display, whereas an ErrorBoundary colocated in the component is ignored in favor of a higher one.

analog pike Dec 2, 2022, 7:20 PM

#

hum, since there's no default export, maybe the colocated ErrorBoundary isn't being called

#`useLoaderData` in child component—inherits from Route?