Access data from resource route from component

[kwiat1990]

Hey, I've created a combobox using useFetcher, which sends a POST request with a searched term to a resource route and if it's all good, then it gets back a response with hits.

The interesting part is getting the data back from the server. Well, inside the combobox component I use simply fetcher.data and it all does work. But how can I make it work from other components/routes? A resource route doesn't exist on useMatches, so I don't really know what the options are.

Right know I propagate returned data using a callback and as I only need to access that data one level higher it's not an issue but what if I need that data somewhere else? Is there a way to get that data directly from the resource route?

[sergiodxa]

Ideally, you move the useFetcher to a parent component of all your components needing the data, and then share it through props or context.

There's also an useFetchers() hook (note the plural) which returns the list of fetchers, similar to useMatches, but there's no simple way to identify a specific fetcher, you will have to do a fetcher.find and check if one of them has the data you need.

---

Side question, why are you using a POST to do a search? It would be simpler to do fetcher.load(/route?term=${encodeURIComponent(term}) and do a GET request, with the benefit that Remix will not re-load all routes loaders after every request (when there's a POST against an action, Remix will revalidate all the data) and you can use an HTTP cache to cache the results, so if the user search the same thing again it can be faster.

[kwiat1990]

I have initially made it a GET with the very code you posted to be able to read query parameters from the action on the server but with that I also got query parameters attached to the current page URL.

To be honest, I need to take another look at this as I‘m not sure if I had used default <Form /> component while I was trying out different approaches.

EDIT: cool, I used fetcher.Form with GET and it works like a charm. I wish it would be easier than to create a state etc. to manage debouncing and searching on the fly instead of on submit. With all that functionality the form looks a bit bloated but it works as expected and Remix DX ist still unbeatable.

[kiliman]

Remix gives you all the building blocks to provide good DX/UX. If you feel there's too much boilerplate, you can always wrap that in a component to use in your app so the implementation is hidden from the consumer.