Remix: programatically trigger loader

Question

Does Remix have a direct way to programatically trigger the current route's loader?

As a workaround, I'm using the function provided by useSubmit to fire an 'empty' action - the action itself does nothing but all actions trigger the loader, so it does what I want.

I suppose this is fine but feels quite hacky. I somewhat expected there to be a built-in API for doing this, but can't find anything by googling.

Perhaps it's just that programatically triggering loaders is against the 'Remix way' - indeed the usecase I need this for involves somewhat dynamic UI which is why I can't just rely on the regular action -> reload workflow - but curious if anyone knows of a direct, or less hacky, way to do this?

Answer 1

If you want to programmatically call loaders in Remix you can use the useFetcher hook provided by Remix. The hook returns an object with a "load" function which you can use to fetch data from a loader. The data is then stored in the "data" prop from the object and can be accessed by that prop. The load function expects an url as parameter. If the loader is located in /routes/foo/bar.tsx, then the url would be /foo/bar.